Question

I’m trying to set up a form with multiple dropdown lists, that will allow visitors to rank the list items. Sample form:

<form action="" name="rankem">
  <select name="rank1" id="rank1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <select name="rank2" id="rank2">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <select name="rank3" id="rank3">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
</form>

As options are selected, I’d like to remove (detach) them from each dropdown.

The actual lists I have contain a lot more options so that people can rank the top 10 out of 32 options, so imagine the sample code above with 10 dropdowns with 32 options each.

If somebody selects ‘option2’ from select#rank1, I’d like option2 removed from subsequent dropdowns, and so on. If they go back to select#rank1, and change their selection to ‘option4’, ‘option2’ will need to be appended to all the dropdowns.

I’ve taken a look at .detach() and .append() but don’t really know what I’m doing.

$("option[value="+$(this).val()+"]").detach();

I tried the above to start but it just removes the option from all dropdowns. I’m a JS/jquery noob so any help or links in the right direction is appreciated. Thanks!

Answer 1

Have you considered enabling/disabling vs. attaching and detaching?

I’m not as quick with the code (working with a broken arm here), but the general algorithm would be this:

$(function() {
    // Respond to any value change.
    $('select').change(function() {
        var val = $(this).val();

        // Enable/disable depending on the selection.
        // Removed the each loop after seeing You's answer (+1). He has a better solution.
        $('select:not(#' + $(this).parent().id + ') option[value=' + val + ']').removeAttr('disabled');
        $('select(#' + $(this).parent().id + ') option[value=' + val + ']').attr('disabled', 'disabled');
    });
});

This has not been tested and I’m still very much learning jQuery (so I’ll take feedback).