Возврат различного контента на основе нескольких выбранных входов

Question

Так что в основном я пытаюсь показать разные цены на основе нескольких выбранных входов.Цены хранятся в WordPress с использованием настраиваемых полей Advance, но на самом деле это просто деталь, если только это не может быть сделано с помощью 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

Ссылки ниже .... это единственный способ показать изображения, потому что я новичок, надеюсь, это нормально?

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

Answer 2

Этого можно добиться с помощью 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">

Возможно, это не самый элегантный способ сделать это, но он выполняет свою работу.