我有多种选择：

<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.

解决方案

回答

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

回答

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

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

回答

或者，我们可以隐藏不想显示的选项...

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 ...