Solved

how to avoid dublicate values in drop down

Posted on 2014-10-27
10
93 Views
Last Modified: 2014-11-11
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 ?? ?
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40408083
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
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40408119
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40408171
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40419139
is that possible to check the  value using div tag
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40419152
<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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40419193
is that possible to check the  value using div tag
Help me out - what do you mean by using div tag?
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40419433
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40419456
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
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40420180
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
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40420540
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

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question