Reset one select list (no highlight) when a second is selected?

How do you do this?

[neophyte]

Hello All -

I've really never done any js (as you will see below) but a lot of php.

I've got a project that requires two select lists ("Standard and "Deluxe") shown side by side.

The "Standard" list will always have the "Eggs" item selected by default when the page loads.

Now, if the user clicks on any item in the "Deluxe" list, I need to have any items already selected in the "Standard" list de-selected - and vice/versa. Pretty much a simple toggle action.

So, I tried to graft my needs into another script which did what I needed ... but with check boxes. After many hours and net-searching I can't get it to work with select lists. Probably a syntax error or something as I know basically nothing about JS.

Could someone please show me the error of my ways?

All assistance greatly appreciated!

Neophyte

************************************************************

Code shown here:

<script type="text/javascript" language="javascript1.2">
function selectCheck(me, group)
{
var checked = me.checked;
if (checked)
for (var i = 1; i < arguments.length; i++)
{
var ck = document.getElementById(arguments[i]);
if (ck) ck.selected = true;
}
me.checked = false;
}
</script>

<select name="Standard" id="std" size="6" onClick="selectCheck(this,'std','del'); return true;"/>
<option value="Eggs">Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option>
</select>

<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std','del'); return true;"/>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>

[rocknbil]

Off the top of my head . . . .

You don't check select lists. You select optons.

With this list, there will ALWAYS be an item selected. So note changes to the select lists.
Also you are passing three parameters to your function, you only need two.

<script type="text/javascript"> 
 function selectCheck(me,other) { 
 var ind = me.selectedIndex; 
 if (ind > 0) { 
  document.getElementById(other).selectedIndex = 0; 
 } 
 } 
</script> 
<select name="Standard" id="std" size="6" onClick="selectCheck(this,'del'); return true;"> 
 <option value="">Select one</option> 
 <option value="Eggs" selected>Eggs</option> 
 <option value="Bacon">Bacon</option> 
 <option value="Toast">Toast</option> 
 <option value="Ham">Ham</option> 
 <option value="Home">Home Fries</option> 
 <option value="Jelly">Jelly</option> 
</select> 
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;"> 
 <option value="">Select one</option> 
 <option value="Omelet">Omelet</option> 
 <option value="Canadian">Canadian Bacon</option> 
 <option value="Muffin">Muffin</option> 
 <option value="Steak">Steak</option> 
 <option value="Cottage">Cottage Fries</option> 
 <option value="Preserves">Preserves</option> 
</select> 

Untested, but that should do it.

[neophyte]

rocknbil -

That's great! worked right away. Thank you SO MUCH!

Two follow on questions if you don't mind:

The actual implementation of this would be using 4 separate select lists not just two (I only gave two in my example cause I **thought** that the onClick call would be able to send a group - or array - of select list IDs that should be "turned off")

So, using your example, how may I alter this so that if one item from one select list was chosen, the remaining three lists would be turned off.

And lastly, does anything need to be selected in the lists that need to be turned off? In your example, lists that are not selected, still select index 0 - or "Choose One".

Isn't there a way to completely "un-hilight" the other three "non-selected" lists? I've already tried "document.getElementById(other).selectedIndex = False; and document.getElementById(other).selectedIndex = NULL;" but that doesn't do the trick.

I've seen this implementation (one list selected, all others completely unselected) a long time ago on another site, but can't find the example now.

Rockinbil, I really appreciate your assistance with what you've done already... if you can help me get through these last two humps, I'd be very grateful!

Neophyte

[rocknbil]

Sorry - been busy getting stuff moved to a dedicated server.

Select lists by nature have to have "something" selected, you can't select "nothing". So inherent in using them is to figure out what you want for a "nothing" value. I usually just make this the top list item, which loads by default:

<option value="">Please Select</option>

An empty string - the option value - is what's sent to the server. If you are concerned about the option text,

<option value=""></option>

or

<option value="">-</option>

As for a list of selects - I would have an array in your routine with the ID's of all selects involved. So when sending from any one of them, if the selected index of the one sending to the function > 0, set everything else to 0. Something like

function some_function(the_select_list) { 
 if (the_select_list.selectedIndex > 0) { 
 var all_lists = new Array('one','two','three','four'); 
 for (i=0;i<all_lists.length,i++) { 
 if (all_lists[i]!= the_select_list.id) { 
 document.getElementById(all_lists[i]).selectedIndex = 0; 
 } 
 } 
 } 
} 

Call it with <select name="one" id="one" onChange="some_function(this);">

Untested, but you get the idea, that should work.