複数選択のイベントリスナー

Question

2つの選択ボックスがあり、異なる入力（またはテキスト）値を表示する必要があります。私は別の選択項目を選択すると、私はどのように私が価値を示すことができるのか分かりませんか？ 例：最初の選択ボックスから1アイテムを選択し、2番目の選択ボックスから1アイテムを選択しました。選択したアイテムの値としてのテキスト値を結果として表示します。

コード：

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

 
        
 
       

私は最初から1つの項目を選択ボックスを選択し、私は結果1の値を表示する2番目の選択ボックスから1つのアイテムを選択した場合、私はしたいです。

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"> 
 
    \t \t   \t <label>Select</label>  
 
    \t \t \t   \t <div class="form-group"> 
 
     \t \t \t \t <select id="kisi"class="form-control" name="rezaractip"> 
 
\t \t \t \t \t \t <option value="1">1 </option> 
 
\t \t \t \t \t \t <option value="23">23 </option> 
 
\t \t \t \t \t \t <option value="96">96 </option> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t  \t </div> 
 
    \t    \t </div> 
 
        
 
        <div class="form-group"> 
 
    \t \t   \t <label>Select</label>  
 
    \t \t \t   \t <div class="form-group"> 
 
     \t \t \t \t <select id="kisi2"class="form-control" name="rezaractip"> 
 
\t \t \t \t \t \t <option value="10">10 </option> 
 
\t \t \t \t \t \t <option value="230">230 </option> 
 
\t \t \t \t \t \t <option value="960">960 </option> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t  \t </div> 
 
    \t    \t </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); 
});