多选事件监听器

Question

我有2个选择框，我想要显示不同的输入（或text）值。 我不知道如果选择其他选择项该如何显示价值？ 例如：我从第一个选择框中选择了一项，然后从第二个选择框中选择了一项，我想显示文本值作为结果，作为选择项的值。

代码：

  <div class="form-group"> <label>Select</label> <div class="form-group"> <select id="kisi"class="form-control" name="rezaractip"> <option value="1">1 </option> <option value="23">23 </option> <option value="96">96 </option> </select> </div> </div> <div class="form-group"> <label>Select</label> <div class="form-group"> <select id="kisi2"class="form-control" name="rezaractip"> <option value="10">10 </option> <option value="230">230 </option> <option value="960">960 </option> </select> </div> </div> <input id="result1 " value="Show1" /> <input id="result2 " value="Show2" /> 

我想从第一选择框中选择一项，然后从第二选择框中选择一项，以便显示result1值。

Answer 1

我不确定您是否正在寻找类似的东西，但是根据您的描述，您可以使用jQuery实现此目的。 从select元素中选择一个值后，只需触发change事件，就可以获取当前选择的值以及其他select value然后将该值传递到要显示的特定输入中。

希望这可以帮助！

 jQuery("#kisi2").on("change", function(){ var selectedValue = jQuery(this).val(); var firstSelectValue = jQuery("#kisi").val(); var thisEl = jQuery("#result2").val(firstSelectValue + " " + selectedValue); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="form-group"> <label>Select</label> <div class="form-group"> <select id="kisi"class="form-control" name="rezaractip"> <option value="1">1 </option> <option value="23">23 </option> <option value="96">96 </option> </select> </div> </div> <div class="form-group"> <label>Select</label> <div class="form-group"> <select id="kisi2"class="form-control" name="rezaractip"> <option value="10">10 </option> <option value="230">230 </option> <option value="960">960 </option> </select> </div> </div> <input id="result1" value="Show1" /> <input id="result2" value="Show2" /> 

Answer 2

我也不太确定您要寻找什么，我假设您只是想显示您选择的值。

let selectOne = document.getElementById("kisi");
let selectTwo = document.getElementById("kisi2");
let resultOne = document.getElementById("result1");
let resultTwo = document.getElementById("result2");

selectOne.addEventListener("change", function(event) {
    resultOne.setAttribute("value", event.target.value);
});

selectTwo.addEventListener("change", function(event) {
    resultTwo.setAttribute("value", event.target.value);
});