Solved

how to avoid dublicate values in drop down

Posted on 2014-10-27
10
84 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
  • 5
  • 5
10 Comments
 
LVL 55

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 55

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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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 55

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 55

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 55

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Grunt script for Build Process 1 43
Call a function within the ASP code 4 19
how can i get the sole odd and th sole even 2 33
On Load function does not trigger on iPhone 4 36
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

830 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