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来实现此目的，方法是将事件侦听器添加到每个select元素，然后调用一个函数以根据用户选择计算输出。在下面的示例中，我仅将结果显示在输入元素中。代码看起来像这样。

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

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

2 个答案: