Jump to content
Sharkadder

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

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

Share this post


Link to post
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});

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...