how to avoid dublicate values in drop down

Hi ,

I have developed a dynamic drop down adding in java script .

that drop down have static value 1 to 9

when dydnamic drop down add time i dont  want to select the same value which is previuos ly selected (dublicate)?

how to do this ?? ?
LVL 20
Sathish David  Kumar NArchitectAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
when dydnamic drop down add time i dont  want to select the same value which is previuos ly selected (dublicate)?
Please explain - it is not clear what you are asking.

It would also help if you provided code to show us what you are doing with a description (and preferably a sample) of what you want to achieve.
0
Sathish David Kumar NArchitectAuthor Commented:
In my page i can create mulitiple drop downs .

for example my page name is invoice and i need to create  mulitple head values(head is the drop down value) .
so i can create muliple head value in single invoice .

the drop down values are is static 0 -9

i am create 3 head value
1st drop down  value is 5
2nd drop down value is 5
3rd drop down value also 5 .

how can we avoid duplicate value in drop dwon
0
Julian HansenCommented:
Using JQuery
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$('select').change(function() {
		var value = $(this).val(); // Current value
		var index = $(this).index(); // Index of current select
		$('select').each(function(idx,el) {
		   if (idx != index && $(el).val() == value) {
			alert('Duplicate Value');
		   }
		});
	});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<select>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
<select>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
<select>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/e051.html
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Sathish David Kumar NArchitectAuthor Commented:
is that possible to check the  value using div tag
0
Sathish David Kumar NArchitectAuthor Commented:
<select name="headNo1" id="headNo1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
<select name="headNo2" id="headNo2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
<select name="headNo3" id="headNo3">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>

Open in new window

0
Julian HansenCommented:
is that possible to check the  value using div tag
Help me out - what do you mean by using div tag?
0
Sathish David Kumar NArchitectAuthor Commented:
Actually in my page head and media is there . both are drop down . actually your code will common for select soo it will effect media also so i want to change that

$('select').change(function() { // this code how can i do that ??
0
Julian HansenCommented:
Oh I see

If your selects are inside a <div> with an id Example

<div id="SelectBoxContainer">

Open in new window


Then you would do this

$('#SelectBoxContainer select').change ...

Open in new window


If your selects are inside a <div> with a class Example

<div class="SelectBoxClass">

Open in new window


Then you would do this

$('div.SelectBoxClass select').change(...

Open in new window


In the above scenarios - you would isolate the selects to only those inside the div with id SelectBoxContainer or in the second case only those div(s) with a class of SelectBoxClass.

All other select's will be ignored.
0
Sathish David Kumar NArchitectAuthor Commented:
This is how my code look like how to do that please help me  

<div id="headNo1">
<select name="headNo1" id="headNo1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo2">
<select name="headNo2" id="headNo2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo3">
<select name="headNo3" id="headNo3">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>

Open in new window

0
Julian HansenCommented:
Put your <div>'s inside a containing div with id headGroup and then just prepend the select in the JQuery with #headGroup like so
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
        // Target only the selects in the div with id
        // headGroup
	$('#headGroup select').change(function() {
		var value = $(this).val(); // Current value
		var index = $(this).index(); // Index of current select
		$('#headGroup select').each(function(idx,el) {
		   if (idx != index && $(el).val() == value) {
			alert('Duplicate Value');
		   }
		});
	});
});
</script><div id="headGroup">
...
<div id="headNo1">
<select name="headNo1" id="headNo1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo2">
<select name="headNo2" id="headNo2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
</select>
</div>
<div id="headNo3">
<select name="headNo3" id="headNo3">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
    </select>
  </div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.