How to hide items under the options from one select box upon selection of an item in another select box?

Question

Hi,

I am new to jQuery and would like to know how is it possible for me to hide an option in a selection box based on the selection of another selection box.

I have 5 selection boxes, this is for the administrator to select the users of a limited criteria. The <options> are create dynamically from the results of a database query and php, and they all have the same <options>.

e.g. this is an example of the selection boxes with their option values.

userbox1 - Amy, Bosh, Cathy, Daniel, Ethan
userbox2 - Amy, Bosh, Cathy, Daniel, Ethan
userbox3 - Amy, Bosh, Cathy, Daniel, Ethan
userbox4 - Amy, Bosh, Cathy, Daniel, Ethan
userbox5 - Amy, Bosh, Cathy, Daniel, Ethan

So if the administrator selects Cathy in userbox1, Cathy will be automatically be hidden from the selection on the rest of the userbox. And if the administrator changes his/her mind and reselect another user call Ethan. The userboxes should be able to show the availability of Cathy in the selection.

I am not sure is hide/show the correct status to be used in such cases. May I know how is it possible to write the function as stated above? If I am missing some current references, kindly point me to it. Thanks in advance.

Answer 1

This should work. Don't shoot me if it doesn't, I haven't actually tested it. If it doesn't work then it should at least be close to what you're looking for.

$('select option').click(function(e) {
    var $that = $(this)
      , $others = $('select option:contains(' + $that.text() + ')').not($that).hide();

    $('select option:hidden').not($others).show();
    return false;
});