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

时间：2017-12-13 02:46:12

标签： javascript jquery html

我有四个选择框。如果我选​​择一个选择框，我想自动选择另外三个选择框。我可以这样做，但它不能使用相同的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();

}）;

2 个答案:

答案 0 :(得分：0)

它比预期的更简单，将值设置为选择，将选择相应的选项，如下所示：

＆＃13;
＆＃13; 
    $(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();
    });
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

扩展Marcelo Origoni的答案，您还可以使用.siblings()功能一次性选择所有其他<select>。请注意，如果同一级别上有任何其他元素，您可能需要执行.siblings('select')而不只是.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>

相关问题
最新问题