<p>I have multiple selects:</p>

<pre><code>&lt;select id="one"&gt;
  &lt;option value="1"&gt;one&lt;/option&gt;
  &lt;option value="2"&gt;two&lt;/option&gt;
  &lt;option value="3"&gt;three&lt;/option&gt;
&lt;/select&gt;
&lt;select id="two"&gt;
  &lt;option value="1"&gt;one&lt;/option&gt;
  &lt;option value="2"&gt;two&lt;/option&gt;
  &lt;option value="3"&gt;three&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>What I want is to select "one" from the first select, then have that option be removed from the second one.
Then if you select "two" from the second one, I want that one removed from the first one.</p>

<p>Here's the JS I have currently:</p>

<pre><code>$(function () {
    var $one = $("#one");
    var $two = $("#two");

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

    $one.change(function () {
        var selectedValue = $("option:selected", this).val();
        for (var i = 0; i &lt; selectOptions[1].length; i++) {
            var exists = false;
            for (var x = 0; x &lt; $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 &lt; selectOptions[0].length; i++) {
            var exists = false;
            for (var x = 0; x &lt; $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();
    });
});
</code></pre>

<p>But when the elements get repopulated, it fires the change event in the select whose options are changing. I tried just setting the <code>disabled</code> attribute on the option I want to remove, but that doesn't work with IE6.</p>

[{'answer_id': 44908, 'author': 'Jason Bunting', 'author_id': 1790, 'author_profile': 'https://Stackoverflow.com/users/1790', 'pm_score': 3, 'selected': True, 'text': '<p>I am not (currently) a user of jQuery, but I can tell you that you need to temporarily disconnect your event handler while you repopulate the items or, at the least, set a flag that you then test for and based on its value, handle the change.</p>\n'}, {'answer_id': 45906, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 2, 'selected': False, 'text': '<p>Here\'s the final code that I ended up using, the flag (<code>changeOnce</code>) worked great, thanks @Jason.</p>\n\n<pre><code>$(function () {\n    var $one = $("#one");\n    var $two = $("#two");\n\n    var selectOptions = [];\n    $("select").each(function (index) {\n        selectOptions[index] = [];\n        for (var i = 0; i &lt; this.options.length; i++) {\n            selectOptions[index][i] = this.options[i];\n        }\n    });\n\n    var changeOnce = false;\n    $one.change(function () {\n        if (changeOnce) return;\n        changeOnce = true;\n        var selectedValue = $("option:selected", this).val();\n        filterSelect(selectedValue, $two, 1);\n        changeOnce = false;\n    });\n    $two.change(function () {\n        if (changeOnce) return;\n        changeOnce = true;\n        var selectedValue = $("option:selected", this).val();\n        filterSelect(selectedValue, $one, 0);\n        changeOnce = false;\n    });\n\n    function filterSelect(selectedValue, $selectToFilter, selectIndex) {\n        for (var i = 0; i &lt; selectOptions[selectIndex].length; i++) {\n            var exists = false;\n            for (var x = 0; x &lt; $selectToFilter[0].options.length; x++) {\n                if ($selectToFilter[0].options[x].value == selectOptions[selectIndex][i].value)\n                    exists = true;\n            }\n            if (!exists)\n                $selectToFilter.append(selectOptions[selectIndex][i]);\n        }\n        $("option[value=\'" + selectedValue + "\']", $selectToFilter).remove();\n        sortSelect($selectToFilter[0]);\n    }\n\n    function sortSelect(selectToSort) {\n        var arrOptions = [];\n\n        for (var i = 0; i &lt; selectToSort.options.length; i++)  {\n            arrOptions[i] = [];\n            arrOptions[i][0] = selectToSort.options[i].value;\n            arrOptions[i][1] = selectToSort.options[i].text;\n            arrOptions[i][2] = selectToSort.options[i].selected;\n        }\n\n        arrOptions.sort();\n\n        for (var i = 0; i &lt; selectToSort.options.length; i++)  {\n            selectToSort.options[i].value = arrOptions[i][0];\n            selectToSort.options[i].text = arrOptions[i][1];\n            selectToSort.options[i].selected = arrOptions[i][2];\n        }\n    }\n});\n</code></pre>\n'}, {'answer_id': 48034, 'author': 'Vincent Robert', 'author_id': 268, 'author_profile': 'https://Stackoverflow.com/users/268', 'pm_score': 0, 'selected': False, 'text': "<p>Or you can just hide the option you don't want to show...</p>\n\n<pre><code>function hideSelected($one, $two)\n{\n    $one.bind('change', function()\n    {\n        var val = $one.val();\n        $two.find('option:not(:visible)').show().end()\n            .find('option[value='+val+']').hide().end();\n    })\n}\nhideSelected($one, $two);\nhideSelected($two, $one);\n</code></pre>\n\n<p>EDIT: Oh sorry, this code does not work with IE6...</p>\n"}]
['https://Stackoverflow.com/questions/44903', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1414/']