使用与jQuery或JavaScript相同的ID创建自动选择框

Question

I have four select box.If I choose one select box, I want to choose another three select box automatically.I could do it but it can't use same id .I want to use same id in other select box without changing id.How can I do that?Please help me.

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

It's way more simpler than you expected, setting the value to the select, will select the corresponding option, like this:

  $(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

Expanding on Marcelo Origoni's answer, you can also use the .siblings() function for selecting all other <select> s at once. Note that if there is any other elements on the same level, you might want to do .siblings('select') instead of just .siblings() .

 $(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>