select box validation

**kpw** · 07-23-2008, 02:22 PM

I am creating a form with multiple select boxes, i want the user to select one option for each box, but not select the same option twice. if the user does select the same option more than once, i want the select box containing the previous selection of that option to be reset.

how would i go about doing this? (i know it probably can't be done using just html, but have no idea what scripting language would be best for this, so have posted here).

any help would be apreciated.

**jscheuer1** · 07-23-2008, 03:09 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--

/* Unique Choices script ©2008 John Davenport Scheuer
   This Notice Must Remain for Legal Use.
   */

function uniqueCoicesSetup(){
uniqueCoicesSetup.modes = {1:'anyMatch', 2:'matchesBetweenIdenticalLists'};
uniqueCoicesSetup.mode = 1; // Set mode of Unique Choices Exclusivity (1 or 2)
var warnings = { // You may edit the two warnings associated with each mode:

anyMatch : 'Only one of each item May be Selected from any List!'

, // <-- Do Not Remove Comma

matchesBetweenIdenticalLists : 'Only one of each item May be Selected!'

///////////////////////// Stop Editing /////////////////////////

}, u = uniqueCoicesSetup,
s = document.getElementsByTagName('select'),
so = function (s1, s2){
if(u.mode == 1) return true;
for (var i = s1.options.length - 1; i > -1; --i)
if((!s1.options[i] || !s2.options[i]) || s1.options[i].text != s2.options[i].text)
return false;
return true;
},
f = function (e){
var s = u.ar, k = u.mode, o = this.options.selectedIndex,
t = this.options[o].text;
for (var i = s.length - 1; i > -1; --i)
if(this != s[i] && o && (k == 1 || o == s[i].options.selectedIndex)
&& t == s[i].options[s[i].options.selectedIndex].text && so(this, s[i])){
s[i].options.selectedIndex = 0;
if(e && e.preventDefault)
e.preventDefault();
alert(warnings[u.modes[u.mode]]);
return false;
}
return true;
},
add = function(el){
uniqueCoicesSetup.ar[uniqueCoicesSetup.ar.length] = el;
if ( typeof window.addEventListener != 'undefined' )
el.addEventListener( 'change', f, false );
else if ( typeof window.attachEvent != 'undefined' ){
var t = function() {
return f.apply(el);
};
el.attachEvent( 'onchange', t );
}
};
uniqueCoicesSetup.ar = [];
for (var i = s.length - 1; i > -1; --i)
if(/nodupe/.test(s[i].className))
add(s[i]);
}

if(typeof window.addEventListener!='undefined')
window.addEventListener('load', uniqueCoicesSetup, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', uniqueCoicesSetup);

// -->
</script>
</head>
<body>
<div>Group 1:
<select class="nodupe" name="l1">
<option value="" selected>Choose</option>
<option value="">Bob</option>
<option value="">Carol</option>
<option value="">Ted</option>
<option value="">Alice</option>
<option value="">Tom</option>
<option value="">Harry</option>
</select>
 
<select class="nodupe" name="l2">
<option value="" selected>Choose</option>
<option value="">Bob</option>
<option value="">Carol</option>
<option value="">Ted</option>
<option value="">Alice</option>
<option value="">Tom</option>
<option value="">Harry</option>
</select>
 &nbsp;Group 2:
<select class="nodupe" name="l3">
<option value="" selected>Choose</option>
<option value="">Andy</option>
<option value="">Ceil</option>
<option value="">Harmony</option>
<option value="">Andrea</option>
<option value="">Tim</option>
<option value="">Harold</option>
</select>
 
<select class="nodupe" name="l4">
<option value="" selected>Choose</option>
<option value="">Andy</option>
<option value="">Ceil</option>
<option value="">Harmony</option>
<option value="">Andrea</option>
<option value="">Tim</option>
<option value="">Harold</option>
</select>
 &nbsp;Another List:
<select class="nodupe" name="l5">
<option value="" selected>Choose</option>
<option value="">Andy</option>
<option value="">Ceil</option>
<option value="">Harmony</option>
<option value="">Andrea</option>
<option value="">Tim</option>
<option value="">Harold</option>
<option value="">Bob</option>
</select>
</div>
</body>
</html>

**kpw** · 07-23-2008, 10:09 PM

thanks, that works really well for what i'm designing. just one question from a usability point of view, is it possible to change the dialog box to have an ok and cancel button, with the cancel button resetting the last select box, and if so, how easy would it be to do that.

once again, thanks for your help (and speedy reply)

**jscheuer1** · 07-24-2008, 04:49 AM

If I understand you correctly, just replace:

Code:

f = function (e){
var s = u.ar, k = u.mode, o = this.options.selectedIndex,
t = this.options[o].text;
for (var i = s.length - 1; i > -1; --i)
if(this != s[i] && o && (k == 1 || o == s[i].options.selectedIndex)
&& t == s[i].options[s[i].options.selectedIndex].text && so(this, s[i])){
s[i].options.selectedIndex = 0;
if(e && e.preventDefault)
e.preventDefault();
alert(warnings[u.modes[u.mode]]);
return false;
}
return true;
},

with:

Code:

f = function (e){
var s = u.ar, k = u.mode, o = this.options.selectedIndex,
t = this.options[o].text;
for (var i = s.length - 1; i > -1; --i)
if(this != s[i] && o && (k == 1 || o == s[i].options.selectedIndex)
&& t == s[i].options[s[i].options.selectedIndex].text && so(this, s[i])){
var c = confirm(warnings[u.modes[u.mode]]);
if(c) s[i].options.selectedIndex = 0;
else this.options.selectedIndex = 0;
if(e && e.preventDefault)
e.preventDefault();
return false;
}
return true;
},

Thread: select box validation

Thread Tools

Search Thread

select box validation

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions