Is there a way to re-populate the Html Select Options without triggering the Change event (using jQuery)?

Question

I have a few options:

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

I want to select "one" from the first selection, and then remove this option from the second. Then, if you select “two” from the second, I want him to retire from the first.

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

But when the elements are populated, it fires a change event in the selection, the parameters of which change. I tried just setting the disabled attribute on the option I want to remove, but this does not work with IE6.

Answer 1

I am not (currently) a jQuery user, but I can tell you that you need to temporarily disable the event handler when refilling the elements or at least set a flag that you then test and based on its value processes the change.

Answer 2

Here's the final code I used, the ( changeOnce ) flag worked fine, thanks @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]; } } }); 

Answer 3

Or you can just hide a parameter that you do not want to show ...

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

EDIT: Sorry, this code does not work with IE6 ...