I'm just starting to learn js and jquerry, googled a lot, poorly understood. How to set the element id if there are 2 lists, i.e. depending on the choice in these lists, the id of the element would change in order to output the value of this id.

<select id="oboroti" name="Oboroti_v_minyty" class="form-select"> <option value="1">28 оборотов в минуту</option> <option value="2">47 оборотов в минуту</option> <option value="3">70 оборотов в минуту</option> <option value="4">140 оборотов в минуту</option> </select> <select id="moshnost" name="Moshnost" class="form-select"> <option value="5">Мощность 0,12 кВт</option> <option value="6">Мощность 0,15 кВт</option> <option value="7">Мощность 0,18 кВт</option> <option value="8">Мощность 0,20 кВт</option> </select>

  • one
    which item id ? And how should it change? Need a little more information - saaaaaaaaasha
  • See, let's say I selected option value = "3" in the first list, option value = "7" in the second, I need to output a div block. This div block is displayed only if these same options are selected in the lists. Those. if the value is 3 and 7, then output 37 and so on. If the value in one of the lists changes, then the information in the div also changes accordingly. - Tyler

1 answer 1

If I understand correctly, then you just need to hang the handler on the changes of values ​​in the select lists and form the id depending on the selected values

 function showElement() { // сначала прячем все ответы $(".answers div").hide(); // получаем текущие значения первого и второго списка var selectOne = $('#oboroti').val(); var selectTwo = $('#moshnost').val(); // формируем id div-блока var id = '#a' + selectOne + '-' + selectTwo // если значения не нулевые, то показываем блок с нужным id if (selectOne && selectTwo) { $(".answers").find(id).show(); } } //при изменении значений в select будет вызываться showElement $('#moshnost, #oboroti').change(showElement); showElement(); 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <select id="oboroti" name="Oboroti_v_minyty" class="form-select"> <option value="1">28 оборотов в минуту</option> <option value="2">47 оборотов в минуту</option> <option value="3">70 оборотов в минуту</option> <option value="4">140 оборотов в минуту</option> </select> <select id="moshnost" name="Moshnost" class="form-select"> <option value="5">Мощность 0,12 кВт</option> <option value="6">Мощность 0,15 кВт</option> <option value="7">Мощность 0,18 кВт</option> <option value="8">Мощность 0,20 кВт</option> </select> <div class="answers"> <div id="a1-5">a1-5</div> <div id="a2-5">a2-5</div> <div id="a3-7">a3-7</div> </div>

If you need to output ( $('#oboroti').val() + $('#moshnost').val() ) and change the value in one div , you can slightly correct the function:

 // <div class="answers"></div> function showElement() { // отчищаем ответ $(".answers").text(); // получаем текущие значения первого и второго списка var selectOne = $('#oboroti').val(); var selectTwo = $('#moshnost').val(); // формируем текст div-блока var id = selectOne + selectTwo; $(".answers").text(id); }
  • Yes, something like that, thanks! - Tyler