Jump to content

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


Sharkadder
 Share

Recommended Posts

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 by Sharkadder
Link to comment
Share on other sites

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});

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Sharkadder
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...