Event Listener for Multiple Select

Question

I have 2 select box and I wantwhich want to show different input (or text ) value. I don't know how can I show value if I select different select item ? For example: I selected 1 item from first select box AND I selected 1 item from second select box and I want show text value as result which as value of selected item.

Code :

  <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" /> 

I want if I select 1 item from first select box AND I select 1 item from second select box I want show result1 value.

Answer 1

I'm not sure if you were looking for something like this, but as I saw based on your description, you can achieve that with jQuery . Just trigger change event after selecting a value from select element, you just grab the current selected value, plus other select value and pass that value in specific input that you want to show.

Hope this helps!

 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

I also wasn't really sure what you were looking for, I assumed you just wanted to show the values you select.

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