Dynamic Drop Down Box

[Lucky2710]

I have a form with 3 drop down boxes (all exactly the same) but i don't want users to be able to select the same thing twice so how can i make it so that when they select something in on box that it either becomes grayed out or disappears all together from the other drop down boxed?

 

I think I'm going to have to use php if else but before i write the code i wanted to make sure thats the way to do it. (Each drop down box has bout 75 option to choose from)

 

Any thoughts or suggestions?

[trink]

Well to do it on the page itself, you're looking more at JavaScript/JQuery.  If you want to do it after the submit, I'd suggest something like this:

if($_POST['box1'] === $_POST['box2'] || $_POST['box1'] === $_POST['box3'] || $_POST['box2'] === $_POST['box3']){
    die('You cannot make the same selection twice');
}

[Lucky2710]

Thanks but ya i was wanting to do it on the form itself. Like validation.

 

If you know any tutorials thatd be great.

[PFMaBiSmAd]

There is a disabled attribute for the <option > tag - http://w3schools.com/tags/att_option_disabled.asp

 

You can easily come up with some javascript to set that attribute whenever a choice is made on an earlier <select> menu.

 

And since this is a client side problem, moving thread the Javascript forum section ...

 

[PFMaBiSmAd]

Here is a specific example of using an id that would probably be helpful - http://www.w3schools.com/js/tryit.asp?filename=try_dom_option_disabled_id

 

If the <option that is selected has an id that relates it to the id of the option that should be disabled, it should be fairly easy to write some generic code to do this. Something like id = 'opt1a' and id 'opt1b'. If option opt1a is the id that gets selected, you can set the disabled attribute for id = 'opt1b'.

[PFMaBiSmAd]

You can also get the selectedIndex from the current select menu and use that to disable the same position in another select menu.

 

Ref: http://www.javascriptkit.com/jsref/select.shtml

[PFMaBiSmAd]

The following demonstrates basically how to do this (assuming you are not using IE browsers) -

<script type="text/javascript">
function disableselected(selectobj){
var nextselect=document.getElementById("sel2"); // reference the next select menu
nextselect.options[selectobj.selectedIndex].disabled=true; // disable the same element in the next select that was just selected in the first select
}
</script>

<form>
<select onChange="disableselected(this)">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select id="sel2">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>

 

The above code leaves any items disabled, so if you change your choice in the first drop-down, each corresponding item in the second drop-down will become disabled. To correct this you would need to loop through all the elements in the second drop-down and set the .disabled element = false before you set the newly selected one to true.

[PFMaBiSmAd]

You could also remove the option from the list (adding it back if they change their selection would take a little coding to accomplish.)

 

Ref: http://w3schools.com/jsref/met_select_remove.asp

 

[Lucky2710]

Dude this is exactly what i wanted.

The following demonstrates basically how to do this (assuming you are not using IE browsers) -

Code: [select]

<script type="text/javascript">

function disableselected(selectobj){

var nextselect=document.getElementById("sel2"); // reference the next select menu

nextselect.options[selectobj.selectedIndex].disabled=true; // disable the same element in the next select that was just selected in the first select

}

</script>

 

<form>

<select onChange="disableselected(this)">

<option>Make Your Pick</option>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

<select id="sel2">

<option>Make Your Pick</option>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

</form>

 

The above code leaves any items disabled, so if you change your choice in the first drop-down, each corresponding item in the second drop-down will become disabled. To correct this you would need to loop through all the elements in the second drop-down and set the .disabled element = false before you set the newly selected one to true.

 

Thats almost exactly what i need. ( i just need three drop downs. Bu t i think i can figure that out if not i know who to ask.

 

Thanks

 

[Lucky2710]

K I'm so close. I've got it to once the first selection is made that the second box has 1st disabled then once you make your second pick it disables that one in the third box. But i just cant seem to make the first selection carry over past the second box to the third!

<script type="text/javascript">
function disableselected(selectobj){
var nextselect=document.getElementById("sel2"); // reference the next select menu
nextselect.options[selectobj.selectedIndex].disabled=true; // disable the same element in the next select that was just selected in the first select
}
function disableselected2(selectobj){
var nextselect=document.getElementById("sel3"); // reference the next select menu
nextselect.options[selectobj.selectedIndex].disabled=true; // disable the same element in the next select that was just selected in the first select
}
</script>

<form>
<select onChange="disableselected(this)">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select id="sel2" onChange="disableselected2(this)">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select id="sel3">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>

 

 

Thanks again to PFMaBiSmAd for getting me this far.

[Lucky2710]

K i've trying different stuff for over 4 hours now. I give up can someone help me out here?

[PFMaBiSmAd]

Give this a try (note: using disabled for an <option> tag works in browser other than IE and in IE8) -

<script type="text/javascript">
function disableselected(selectobj){
var select2=document.getElementById("sel2");
var select3=document.getElementById("sel3");
// if the first choice is changed, reset the 2nd and 3rd select lists
for (var i=0; i<selectobj.options.length; i++){
	select2.options[i].disabled=false; // clear any exiting disabled options
	select3.options[i].disabled=false; // clear any exiting disabled options		
}
select2.options[0].selected=true; // clear any exiting selection (select the Make Your Pick option)
select3.options[0].selected=true; // clear any exiting selection (select the Make Your Pick option)
// if you didn't pick the Make Your Pick, disable the same choice in the 2nd and 3rd select lists
if(selectobj.selectedIndex != 0){
	select2.options[selectobj.selectedIndex].disabled=true;
	select3.options[selectobj.selectedIndex].disabled=true;
}
}

function disableselected2(selectobj){
var select3=document.getElementById("sel3");
// if the second choice is changed, reset the 3rd select list
for (var i=0; i<selectobj.options.length; i++){
	if(selectobj.options[i].disabled == false){
		select3.options[i].disabled=false; // clear any exiting disabled options		
	} else {
		select3.options[i].disabled=true; // set disabled if the current menu's option is also disabled	
	}
}
select3.options[0].selected=true; // clear any exiting selection (select the Make Your Pick option)
// if you didn't pick the Make Your Pick, disable the same choice in the 3rd select list
if(selectobj.selectedIndex != 0){
	select3.options[selectobj.selectedIndex].disabled=true;
}
}
</script>

<form>
<select onclick="disableselected(this)">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select id="sel2" onclick="disableselected2(this)">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select id="sel3">
<option>Make Your Pick</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>

[Lucky2710]

Dude YOU ARE THE MAN!!! 

 

YOU ROCK!!!  :D