多选事件监听器答案

【问题标题】：Event Listener for Multiple Select多选事件监听器
【发布时间】：2018-06-01 05:49:11
【问题描述】：

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

如果我从第一个选择框中选择 1 项，并且我从第二个选择框中选择 1 项，我想要显示 result1 值。

【问题讨论】：

标签： javascript jquery html

【解决方案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" />

【讨论】：

【解决方案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);
});

【讨论】：