how to disable a dropdown item after its been selected

Question

i have a regular combobox and i am listening to the change event and sticking the selected value in an html table. this all works fine but there is one issue. Right now, the user can select the same item more than once (which i dont want to allow).

At the point of where an item is selected, i want to:

1. Capture the value and stick it in the table (which i am doing now and code is below)

   <script type="text/javascript">
       $(document).ready(function() {
       $('#categories').change(function() {
           if (this.selectedIndex != 0) {
               addRowToTable(this.value);
           }
       });
   }
   

And i am trying to figure how to do #2 and #3 below . .

1. reset the selectedindex back to 0 (which says "Please select . .")
2. Not allow that selection to be selected again (and any visual representation on disabling that dropdown item).

Answer 1

You could add a rel="disabled" attribute to the option and check for it like so:

$(document).ready(function() {
    $('#categories').change(function() {
        if (this.selectedIndex != 0 && $(this).attr('rel') != 'disabled') {
            addRowToTable(this.value);
            $(this).attr('rel', 'disabled');
        }
    });
});

If your first option (selectedIndex 0) has an empty value, you can easily reset like so:

$(document).ready(function() {
    $('#categories').change(function() {
        if (this.selectedIndex != 0 && $(this).find('option:selected').attr('rel') != 'disabled') {
            addRowToTable(this.value);
            $(this).find('option:selected').attr('rel', 'disabled');
        }
        // reset selected index
        $(this).val('');
    });
});

Answer 2

Number 1 is pretty simple:

$('#categories option:first').get(0).selectedIndex = 0;

You can also use the value of the option against the dropdown list like so:

$('#categories').val('myOptionValue');

To prevent an item from being selected a second time, I would remove it from the dropdown list with something like this:

$('#categories option[value=valueToRemove]').remove();

Answer 3

OK if i were you i wouldnt use a Drop down box for this... i would use multiple <select multiple="true"> which is going to allow you to select multiple items at a time by using ctrl+click (cmd+click on mac), then i would have an add button to click when done. this would fire the js taht would grab all the selected options put em in your table or what have you and then then remove them from the select box.

http://www.w3schools.com/TAGS/att_select_multiple.asp

Answer 4

cballou's answer sets @rel="disabled" on the select element, which causes the "single selection allowed bug".

I would tweak it to look like the below code. Also, I'd recommend setting a class instead of using the rel attribute. That way you add styles (browser permitting) that indicate to the user that the option is disabled.

CSS:

#categories .disabled { background:#c00; }

JS:

   $(document).ready(function() {
        $('#categories').change(function() {
            var selectedIndex = this.selectedIndex,
                selection;
           if ( selectedIndex !== 0 ) {
                selection = $(this.options[selectedIndex]);
                if( !selection.hasClass('disabled') ) {
                    addRowToTable(this.value);
                    selection.addClass('disabled');
                }
           }
          // reset selected index
          $(this).val('');
        });
   });