No Duplicate Selects

Vic Phillips Jul 5, 2006

Prevent a selected option text or value from being chosen in another select box.

Try to select the same color text:

The JavaScript Source: Forms : No Duplicate Selects

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Vic Phillips :: http://www.vicsjavascripts.org.uk */

/* The Select must have an 'onchange' event
   onchange="f1_NoDuplicateSelect(this,'text');"
   to verify that select texts are different
   or
   onchange="f1_NoDuplicateSelect(this,'value');"
   to verify that select values are different

All variable, function etc. names are prefixed with 'f1_'
  to minimise conflicts with other JavaScripts */

var f1_TextAry=new Array();
var f1_ValueAry=new Array();

<p style="width: 75%; margin-left: 25%; line-height: 2em;">
Try to select the same color text:
<br>
<select name="Color_1" class="TxtArea" onchange="f1_NoDuplicateSelect(this,'text');" >
  <option selected value=''>Select first color</option>
  <option value='1'>Red</option>
  <option value='2'>Yellow</option>
  <option value='3'>Green</option>
  <option value='4'>Blue</option>
</select>
<select name="Color_2" class="TxtArea" onchange="f1_NoDuplicateSelect(this,'text');" >
  <option selected value=''>Select second color</option>
  <option value='4'>Red</option>
  <option value='1'>Yellow</option>
  <option value='2'>Green</option>
  <option value='3'>Blue</option>
</select>
<select name="Color_3" class="TxtArea" onchange="f1_NoDuplicateSelect(this,'text');" >
  <option selected value=''>Select third color</option>
  <option value='3'>Red</option>
  <option value='4'>Yellow</option>
  <option value='1'>Green</option>
  <option value='2'>Blue</option>
</select>
</p>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

No Duplicate Selects

Leave a Response

Attention JavaScript Coders

Go Deeper