Disable option in other drop down boxes upon a selection in another

[Sharkadder]

Hi there, I have 10 drop down boxes on a page where people can select some units they wish to study. Obviously people can pick more than one unit and so i want to avoid them from picking the same unit twice in each of the drop down boxes. I have looked into the disable function on drop down boxes but cannot figure out how i would go about disabling a drop down selection entry using Javascript. So far i have looked at the following jquery function below but it will not work on my php page as i do not have access to the head of the document on the platform i am on and just the body: $('select').change(function() { var ary = new Array(); $('select option:selected').each(function() { if ($(this).val().length > 0) { ary.push($(this).val()); } }); $('select option').each(function() { if ($.inArray($(this).val(), ary) > -1) { $(this).attr('disabled', 'disabled'); } else { $(this).removeAttr('disabled'); } });}); The example above is the sort of thing i am after but having studied the code, without it being in the head of the document it will not work and so it does not work when i change entry in the dropdown list. Does anybody have any modifications to the code or examples i can use to find out the values of all other dropdown's on a form and to then disable an index in the others where one is already selected on that index? Obviously i would need something to enable selections again. Even an alert box stating that the unit has already been picked and resetting back to original value would do. Many thanks, Mark

Edited October 8, 2012 by Sharkadder

[es131245]

in change function first of all write to hide all rest functionssomething like // on change$('select').change(function() { // hide all function $('select').each(function() { // hide all }); // carry on listing hovered list});

[dsonesuk]

Not sure if this is what you are looking for, but

$(function(){$('select').change(function() {$current=$(this);$("select").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");});});

It needs work, on when the user changes mind and returns to already selected option, needs to do some resetting, and reprocess

[Sharkadder]

Hi, I solved the problem with the following function, although it does require a loop. Not sure if there is a more efficent way but my page seems to load fine with it:

//dropdown is the dropdown you selected and theForm is the formfunction checkselected(theForm, dropdown){for (i=0; i<theForm.length; i++) {  //myval.options[myval.selectedIndex].innerHTML  if (theForm.elements[i].type == "select-one")  {   if (dropdown.options[dropdown.selectedIndex].innerHTML == theForm.elements[i].options[theForm.elements[i].selectedIndex].innerHTML && theForm.elements[i].name != dropdown.name)   {	alert("You have already selected this unit.  Please choose a different one.");   //change index on selected dropdown back to zero   dropdown.selectedIndex = 0;   }  }}}

Edited October 10, 2012 by Sharkadder