Solved

how to avoid dublicate values in drop down

Posted on 2014-10-27
10
76 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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 20

Author Comment

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

Author Comment

by:Sathish David Kumar N
Comment Utility
<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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now