多选的事件监听器

Question

我有2个选择框，我想要显示不同的输入（或文本）值。如果我选择不同的选择项目，我不知道如何显示价值？例如：我从第一个选择框中选择了1个项目并且我从第二个选择框中选择了1个项目，我希望显示文本值作为所选项目的值的结果。

代码：

 <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

我不确定你是否在寻找这样的东西，但正如我根据你的描述所看到的那样，你可以用jQuery实现这一点。只需在从change元素中选择一个值后触发select事件，您只需获取当前选定的值，加上其他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);
});