jqueryまたはjavascriptで同じIDを使用して自動選択ボックスを作成する

Question

私は1つの選択ボックスを選択すると、自動的に別の3つの選択ボックスを選択したいと思います。私はidを変更せずに他の選択ボックスで同じIDを使用したいと思います。私はそれを行うことはできますか？

Htmlの

<select class="selectbox" name="select1" id="select1"> 
           <option value="1">Business Center</option> 
           <option value="2">Option 1</option> 
           <option value="3">Option 2</option> 
           <option value="4">Option 3</option> 
           <option value="5">Option 4</option> 
          </select> 
          <select class="selectbox" name="select2" id="select2"> 
           <option value="1">Chinese</option> 
           <option value="2">Option 1</option> 
           <option value="3">Option 2</option> 
           <option value="4">Option 3</option> 
           <option value="5">Option 4</option> 
          </select> 
          <select class="selectbox" name="select3" id="select3"> 
           <option value="1">English Center</option> 
           <option value="2">Option 1</option> 
           <option value="3">Option 2</option> 
           <option value="4">Option 3</option> 
           <option value="5">Option 4</option> 
          </select> 
          <select class="selectbox" name="select4" id="select4"> 
           <option value="1">Korea Center</option> 
           <option value="2">Option 1</option> 
           <option value="3">Option 2</option> 
           <option value="4">Option 3</option> 
           <option value="5">Option 4</option> 
          </select> 

のjQuery

$(document).ready(function(){ 
     $('#select1').on('change' , function(){ 
      var getVal = $(this).val(); 
      $('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      }).change(); 

     $('#select2').on('change' , function(){ 
      var getVal = $(this).val(); 
      $('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      }).change(); 

     $('#select3').on('change' , function(){ 
      var getVal = $(this).val(); 
      $('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      }).change(); 

     $('#select4').on('change' , function(){ 
      var getVal = $(this).val(); 
      $('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      $('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true); 
      }).change(); 

}）。

Answer 1

それは選択に値を設定し、あなたが予想より方法がより簡単です、対応するオプションを選択します、次のように：マルセロOrigoniの答えに拡大

$(document).ready(function(){ 
 
     $('#select1').on('change' , function(){ 
 
     $('#select2').val($(this).val()); 
 
     $('#select3').val($(this).val()); 
 
     $('#select4').val($(this).val()); 
 
     }).change(); 
 

 
     $('#select2').on('change' , function(){ 
 
     $('#select1').val($(this).val()); 
 
     $('#select3').val($(this).val()); 
 
     $('#select4').val($(this).val()); 
 
     }).change(); 
 

 
     $('#select3').on('change' , function(){ 
 
     $('#select2').val($(this).val()); 
 
     $('#select1').val($(this).val()); 
 
     $('#select4').val($(this).val()); 
 
     }).change(); 
 

 
     $('#select4').on('change' , function(){ 
 
     $('#select2').val($(this).val()); 
 
     $('#select3').val($(this).val()); 
 
     $('#select1').val($(this).val()); 
 
     }).change(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectbox" name="select1" id="select1"> 
 
            <option value="1">Business Center</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select> 
 
           <select class="selectbox" name="select2" id="select2"> 
 
            <option value="1">Chinese</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select> 
 
           <select class="selectbox" name="select3" id="select3"> 
 
            <option value="1">English Center</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select> 
 
           <select class="selectbox" name="select4" id="select4"> 
 
            <option value="1">Korea Center</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select>

Answer 2

、あなたがすることもできます他のすべての<select>を同時に選択するには、.siblings()関数を使用します。同じレベルに他の要素がある場合は、.siblings()の代わりに.siblings('select')を使用することをお勧めします。

$(document).ready(function(){ 
 
    $('#select1, #select2, #select3, #select4').on('change' , function(e){ 
 
    $(this).siblings().val($(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectbox" name="select1" id="select1"> 
 
            <option value="1">Business Center</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select> 
 
           <select class="selectbox" name="select2" id="select2"> 
 
            <option value="1">Chinese</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select> 
 
           <select class="selectbox" name="select3" id="select3"> 
 
            <option value="1">English Center</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select> 
 
           <select class="selectbox" name="select4" id="select4"> 
 
            <option value="1">Korea Center</option> 
 
            <option value="2">Option 1</option> 
 
            <option value="3">Option 2</option> 
 
            <option value="4">Option 3</option> 
 
            <option value="5">Option 4</option> 
 
           </select>