有没有办法在不触发 Change 事件（使用 jQuery）的情况下填充 Html Select Options？答案

【问题标题】：Is there any way to repopulate an Html Select's Options without firing the Change event (using jQuery)?有没有办法在不触发 Change 事件（使用 jQuery）的情况下填充 Html Select Options？
【发布时间】：2010-09-07 21:03:33
【问题描述】：

我有多个选择：

<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();
    });
});

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

【问题讨论】：

标签： javascript jquery dom html-select

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是我最终使用的最终代码，标志 (changeOnce) 效果很好，感谢 @Jason。

$(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];
        }
    });

    var changeOnce = false;
    $one.change(function () {
        if (changeOnce) return;
        changeOnce = true;
        var selectedValue = $("option:selected", this).val();
        filterSelect(selectedValue, $two, 1);
        changeOnce = false;
    });
    $two.change(function () {
        if (changeOnce) return;
        changeOnce = true;
        var selectedValue = $("option:selected", this).val();
        filterSelect(selectedValue, $one, 0);
        changeOnce = false;
    });

    function filterSelect(selectedValue, $selectToFilter, selectIndex) {
        for (var i = 0; i < selectOptions[selectIndex].length; i++) {
            var exists = false;
            for (var x = 0; x < $selectToFilter[0].options.length; x++) {
                if ($selectToFilter[0].options[x].value == selectOptions[selectIndex][i].value)
                    exists = true;
            }
            if (!exists)
                $selectToFilter.append(selectOptions[selectIndex][i]);
        }
        $("option[value='" + selectedValue + "']", $selectToFilter).remove();
        sortSelect($selectToFilter[0]);
    }

    function sortSelect(selectToSort) {
        var arrOptions = [];

        for (var i = 0; i < selectToSort.options.length; i++)  {
            arrOptions[i] = [];
            arrOptions[i][0] = selectToSort.options[i].value;
            arrOptions[i][1] = selectToSort.options[i].text;
            arrOptions[i][2] = selectToSort.options[i].selected;
        }

        arrOptions.sort();

        for (var i = 0; i < selectToSort.options.length; i++)  {
            selectToSort.options[i].value = arrOptions[i][0];
            selectToSort.options[i].text = arrOptions[i][1];
            selectToSort.options[i].selected = arrOptions[i][2];
        }
    }
});

【讨论】：

【解决方案3】：

或者你可以隐藏你不想显示的选项...

function hideSelected($one, $two)
{
    $one.bind('change', function()
    {
        var val = $one.val();
        $two.find('option:not(:visible)').show().end()
            .find('option[value='+val+']').hide().end();
    })
}
hideSelected($one, $two);
hideSelected($two, $one);

编辑：抱歉，此代码不适用于 IE6...

【讨论】：