javascript - 使用 jquery 或 javascript 使用相同的 id 创建自动选择框

Question

我有四个选择框。如果我选​​择一个选择框，我想自动选择另外三个选择框。我可以做到，但它不能使用相同的 id。我想在其他选择框中使用相同的 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

比你想象的简单多了，给select设置值，就会选择对应的选项，像这样:

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