多選事件監聽器

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);
});