根据多个选择输入返回不同的内容

Question

所以基本上我试图根据多个选择输入显示不同的价格。价格使用高级自定义字段存储在 WordPress 中，但这只是一个细节，除非它可以通过 AFC 完成。

<select>
 <option>12 months</option>
 <option>24 months</option>
 <option>36 months</option>
</select>

<select>
 <option>1000 deposit</option>
 <option>2000 deposit</option>
 <option>3000 deposit</option>
</select>

* if 12 months and 2000 deposit are selected Show a dynamic price and so on *

最好的方法是什么？我见过很多单一选择输入的例子，但没有看到各种输入。谢谢！

Answer 1

您可以使用 JavaScript 通过向每个选择元素添加事件侦听器然后调用函数来根据用户选择计算输出来实现此目的。在下面的示例中，我只是在输入元素中显示结果。代码看起来像这样。

let select1 = document.getElementById("select1");
//add eventListener to call calculation function on change of first select
select1.addEventListener("change", () => {
	calculate( select1.value, document.getElementById("select2").value );
});

let select2 = document.getElementById("select2");
//add eventListener to call calculation function on change of second select
document.getElementById("select2").addEventListener("change", () => {
	calculate( document.getElementById("select1").value, select2.value );
});

   

//calculate result and display it in an input box
function calculate( val1, val2 ){
	//possibility 1
  if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 1000 ) {
  	//assign some value to something you want
	document.getElementById("result").value = "$150.25";
  } else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 2000 ) {
  	document.getElementById("result").value = "$50.25";
  } else if ( parseInt( val1 ) === 12 && parseInt( val2 ) === 3000 ) {
  	document.getElementById("result").value = "$10.25";
  }
  //.......and so on with the rest of possibilities
}

<select id="select1">
 <option value="12">12 months</option>
 <option value="24">24 months</option>
 <option value="36">36 months</option>
</select>

<select id="select2">
 <option value="1000">1000 deposit</option>
 <option value="2000">2000 deposit</option>
 <option value="3000">3000 deposit</option>
</select>

<input type="text" id="result">

可能不是最优雅的方式，但它可以完成工作。

Answer 2

下面的链接....这是我可以显示图像的唯一方法，因为我是新手，希望这样可以吗？

https://ibb.co/mSYyzf
https://ibb.co/bRT95L
https://ibb.co/ds72QL
https://ibb.co/nGAdzf