I want to limit 3+ select boxes to only pick one <option> once - what am I doing wrong?

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 option s that are the i th child of their parents. Whereas eq will only select the i th element from the set of matched elements (ie 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");

});

Answer 2

I believe you need to add code to this function to remove the related value from the array of selected values:

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

        select.remove();
       $(this).remove();

  });

Alternatively, you could add an array to track the value that was selected in the dropdown being removed at the time of removal, and then exclude those values from the other function, where you grey out values that are used.

Answer 3

demo

it's because of this line, var $selects = $('select'); .

yes you removed the select element but not on that var $selects .

this will fixed it...

   select.remove();
   $(this).remove();
   $selects = $selects.not(select);

or

like this,

   $(this).remove();
   $selects = $selects.not(select.remove());

Answer 4

OK, so I was going to point out as the other answers did that you need to "recollect" your $select variable to have the most current items. However, your script failed for me so I took a different approach. Below is my code. You can also demo it here and a fully commented version is available here .

var $selects = $('select');

$selects
  .after('<button>remove</button><br /><br />')
  .each(function(i, el) {
    $(this)
      .next()
      .click(function(e) {
        e.preventDefault();

        $(el).remove();
        $(this).remove();

        $selects = $('select');
        $selects.change(); 
      });
    })
  .change( function() {
    $selects
      .children().removeAttr("disabled").end()
      .each(function(i, el){
        $selects
          .not(this)
          .find(':selected')
          .each(function(){ 
            $(el).find('option')
                 .eq($(this).index())
                 .attr('disabled', true);
          });                                                             
      });
    })
  .change();

​

Answer 5

even after removing select element $selects array contained reference to it. I've modified $selects.each function:

$selects.each(function() {
        var select = $(this);
        select.next('button').click(function(event) {
        event.preventDefault();

        $selects=$selects.not(select);//ADDED THIS LINE

        select.remove();
        $(this).remove();
    });
});