Question

表单中有两个select个元素。在一个元素中选择b时，必须在另一个元素中选择z。

当我测试下面的实现时，这个切换功能会工作一段时间，然后在我从选择一个元素上的选项切换到选择另一个元素上的选项时停止工作。

我找不到一种模式来识别发生了什么，但我认为逻辑上存在重复。

我们的想法是稍后扩展两个元素的选项列表，但是现在我只想让切换效果起作用。

$("#5").change(function() {

    if ($('#5').val() == 'b') {

        $('#6').find('option:selected').removeAttr("selected");
        $('#6 option[value=z]').attr('selected', 'selected');

    } else if ($('#5').val() == 'z') {

        $('#6').find('option:selected').removeAttr("selected");
        $('#6 option[value=b]').attr('selected', 'selected');

    }

})

$("#6").change(function() {

    if ($('#6').val() == 'b') {

        $('#5').find('option:selected').removeAttr("selected");
        $('#5 option[value=z]').attr('selected', 'selected');

    } else if ($('#6').val() == 'z') {

        $('#5').find('option:selected').removeAttr("selected");
        $('#5 option[value=b]').attr('selected', 'selected');

    }

})

我该如何解决这个问题？

Answer 1

你可以这样做：

使用jQuery的prop()方法代替！

在选择器内使用$(this)来获取当前对象

＆＃13;

$(function(){

  $("#5").change(function() {
      if ($(this).val() == 'b') {

          $('#6').find('option:selected').prop("selected", false);
          $('#6 option[value=z]').prop('selected', true);

      } else if ($(this).val() == 'z') {

          $('#6').find('option:selected').prop("selected", false);
          $('#6 option[value=b]').prop('selected', true);

      }

  })

  $("#6").change(function() {

      if ($(this).val() == 'b') {

          $('#5').find('option:selected').prop("selected", false);
          $('#5 option[value=z]').prop('selected', true);

      } else if ($(this).val() == 'z') {

          $('#5').find('option:selected').prop("selected", false);
          $('#5 option[value=b]').prop('selected', true);

      }

  })

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="5">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="z">z</option>
    <option value="x">x</option>
  </select>
  
  <select id="6">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="z">z</option>
    <option value="x">x</option>
  </select>
</div>

＆＃13;

希望这有帮助！

使用jQuery切换选择表单元素中的选定选项

1 个答案: