Select one list, de-select all others . version 2

Can someone look at this and tell me how to modify?

[neophyte]

Rocknbill offered a wonderful and simple solution I had to a problem regarding resetting previous option values of one select list when an option item in another list was selected.

Now my client has grown this spec from two lists to 4 – now, when item in any one of the four lists are selected, any previously-selected items in the remaining three lists would be un-selected.

Not knowing any JS, I’ve tried to fiddle with the original script, but to no avail. I think the solution would lay in being able to pass an array of select lists to the function; when an option in one list is selected, the function would then de-select any items in ALL other lists… but I don’t know how that is done.

Also, when one list is selected, this guy I’m working for doesn’t want ANY items highlighted inside any of the other lists – rocknbill’s solution set the index of the other lists to zero with a “select one” option.

Is it possible to not show a highlight on any of the other “non-targeted” lists?

Rocknbills original script is below for reference; any and all assistance with this current challenge is greatly appreciated!

Neophyte

<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>

[mehh]

<script type="text/javascript">
function selectCheck(me,other) {
var ind = me.selectedIndex;
if (ind > 0) {
if(typeOf(other)=="string")
document.getElementById(other).selectedIndex = 0;
else
{
for(var i=0;i<other.length;i++)
{
if(document.getElementById(other[i]))
document.getElementById(other[i]).selectedIndex = 0;
}
}
}
}
</script>
<select name="Standard" id="std" size="6" onClick="selectCheck(this,['del','otherselect','ect']); 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>

I've only showed one select list but you get the idea. Plus this function should still work with strings sent to it aswell

[cmarshall]

This has the advantage of scaling to as many lists (and types of lists) as you want to have:

<script type="text/javascript">
// <![CDATA[
function ThereCanBeOnlyOne(in_select) {
var selected_item = in_select.selectedIndex;
for(var c=0; c<in_select.form.elements.length; c++){
if(typeof in_select.form.elements[c].selectedIndex!= 'undefined'){
in_select.form.elements[c].selectedIndex=0;
}
in_select.selectedIndex=selected_item;
}
}
// ]]>
</script>
<div>
<form id="test" action="#" method="get"><div id="form_container">
<noscript>You can only select one item.</noscript>
<select name="Spam" id="spm" size="7" onchange="ThereCanBeOnlyOne(this); return true;">
<option value="" selected="selected">Select one</option>
<option value="Spam and Eggs">Spam and Eggs</option>
<option value="Spam and Bacon">Spam and Bacon</option>
<option value="Spam on Toast">Spam on Toast</option>
<option value="Spam, Spam and Ham">Spam, Spam and Ham</option>
<option value="Spam, Spam, Spam and Spam">Spam, Spam, Spam and Spam</option>
<option value="Spam">Whatever the Vikings are 'aving</option>
</select>
<select name="Standard" id="std" size="7" onchange="ThereCanBeOnlyOne(this); return true;">
<option value="" selected="selected">Select one</option>
<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="7" onchange="ThereCanBeOnlyOne(this); return true;">
<option value="" selected="selected">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>
</div></form>
</div>

Note that I am using "onchange()", not "onclick()". This is better for accessibility.

[rocknbil]

For functionality too, onClick wass an ERROR on my part. Always use onChange on selects. :-)

I have one possible answer for you in your other thread.