javascript - 有什么方法可以在不触发 Change 事件的情况下重新填充 Html Select 的选项(使用 jQuery)？

Question

我有多个选择:

<select id="one">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<select id="two">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

我想要的是从第一个选择中选择“一个”，然后从第二个选择中删除该选项。 然后，如果您从第二个中选择“两个”，我希望从第一个中删除那个。

这是我目前拥有的 JS:

$(function () {
    var $one = $("#one");
    var $two = $("#two");

    var selectOptions = [];
    $("select").each(function (index) {
        selectOptions[index] = [];
        for (var i = 0; i < this.options.length; i++) {
            selectOptions[index][i] = this.options[i];
        }
    });

    $one.change(function () {
        var selectedValue = $("option:selected", this).val();
        for (var i = 0; i < selectOptions[1].length; i++) {
            var exists = false;
            for (var x = 0; x < $two[0].options.length; x++) {
                if ($two[0].options[x].value == selectOptions[1][i].value)
                    exists = true;
            }
            if (!exists)
                $two.append(selectOptions[1][i]);
        }

        $("option[value='" + selectedValue + "']", $two).remove();
    });
    $two.change(function () {
        var selectedValue = $("option:selected", this).val();
        for (var i = 0; i < selectOptions[0].length; i++) {
            var exists = false;
            for (var x = 0; x < $one[0].options.length; x++) {
                if ($one[0].options[x].value == selectOptions[0][i].value)
                    exists = true;
            }
            if (!exists)
                $one.append(selectOptions[0][i]);
        }

        $("option[value='" + selectedValue + "']", $one).remove();
    });
});

但是当元素被重新填充时，它会在选项正在更改的选择中触发更改事件。我尝试在要删除的选项上设置 disabled 属性，但这不适用于 IE6。

Answer 1

我(目前)不是 jQuery 的用户，但我可以告诉您，您需要在重新填充项目时暂时断开事件处理程序的连接，或者至少设置一个标志，然后您可以根据该标志进行测试它的值(value)，处理变化。