Question

I set up my jQuery like so.

It successfully lets me pick an option only once throughout the 3 dropdowns.

However, if I remove a dropdown (use the convenient button), an option is forever disabled (greyed out).

You’ll see what I mean. First, ensure that it works and you can not select the same option more than once.

Now, remove and notice that one has been disabled, and it can never be selected again.

I don’t know why it is forever greying out my option? It seems to keep picking it up when making the selectedIndexes array.

Does anyone know how to get around this problem?

Answer 1

I made some changes to your code, you can see them here. It also did not work for my in the beginning, but now it works, I think, as expected. If you have questions, just comment 🙂

---

Here we go:

Redeclare the $selects array once you remove an element. The reference to the element is still in the array, so when you later compute the selected indexes, it will still be there!

select.next('button').click(function(event) {
        event.preventDefault();

        select.remove();
       $(this).remove();
       $selects = $('select');  // <-- redeclare selects here, one is gone!
});

In the select click handler, use nth-child instead of eq. The former one will select all options that are the ith child of their parents. Whereas eq will only select the ith element from the set of matched elements (i.e. it will only return one element). Note that the index of nth-child is one-based.

// Remove them from this dropdown
$.each(selectedIndexes, function(i, index) {

  // use n-th child here to get the child of each select.
  // eq only selects the element from the matched set
  $thisSelect.find('option:nth-child('+(index+1)+')').attr("disabled","disabled");

});