Solved

how to avoid duplicate value selection in drop down

Posted on 2014-11-03
18
1,399 Views
Last Modified: 2014-11-13
<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


My code look like this , if user select 9 in 1st drop down then , they attempt select 9 in another drop down means i need to give alert message ?  how to do that??
0
Comment
  • 11
  • 7
18 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40420287
test page : http://jsfiddle.net/z4rknhg2/

jQuery(function($) {
    var backups = {};
    $("select[id^=headNo]").change(function() {
        var v = $(this).val();
        var f = false;
        $("select[id^=headNo]").not(this).each(function() {
            if($(this).val() == v) {
                f = true;
                return;                
            }
        });
        if(f) {
            $(this).val(backups[$(this).attr("id")]);
            alert("dont choose this value!");
        }
        else {
            backups[$(this).attr("id")] = v;
        }
    }).val(null);
});

Open in new window

0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40420949
thanks how to include jquery.js file into another js file ??
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40421219
copy/paste
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40421254
alert(headName);
    c1.innerHTML = "<input type=\"hidden\" name=\"" + headDcKeyName + "\" value=\"0\"> " +
        "<table border=1 width=\"150\" cellpadding=0 cellspacing=0><tr> " +
          "<td width=\"150\" class=\"head_media_data_cntr\"><div id=\"" + headDivName + "\">" +
                "<select name=\"" + headName + "\" id=\"" + headName + "\" onchange=\"setModified();duplicateHeadCheck();\">" +
                "<option value=\"x\">Select Head No</option>" +
                "<option value=\"0\">0</option>" +
                "<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>" +
                "<option value=\"10\">10</option>" +
                "<option value=\"11\">11</option>" +
                "<option value=\"12\">12</option>" +
                "<option value=\"13\">13</option>" +
                "</select</div></td>" +

      "</tr></table>";

Open in new window


I am dydnamically create the drop down so it does not take the onchange function and always return null value ???

How to reslove this ??
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40421260
put the code after line 23 (line 2 to 19)
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40423203
actually dynamically create the drop down is a function(which i posted  )

Which code i want to put ? Jquery or ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40423613
what did you try?
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40425534
i put your jquery code below the 23 line
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40425564
Inner HTML does not do the onchange proecess ??  Why ??
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40425757
......
       else {
            backups[$(this).attr("id")] = v;
        }
    }).val(null);
});

Open in new window


.val(null) is reset the saved value while retrieve back ? ...

Why .val(null) is used here ??
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40425760
alert(headName);
    c1.innerHTML = "<input type=\"hidden\" name=\"" + headDcKeyName + "\" value=\"0\"> " +
        "<table border=1 width=\"150\" cellpadding=0 cellspacing=0><tr> " +
          "<td width=\"150\" class=\"head_media_data_cntr\"><div id=\"" + headDivName + "\">" +
                "<select name=\"" + headName + "\" id=\"" + headName + "\" onchange=\"setModified();duplicateHeadCheck();\">" +
                "<option value=\"x\">Select Head No</option>" +
                "<option value=\"0\">0</option>" +
                "<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>" +
                "<option value=\"10\">10</option>" +
                "<option value=\"11\">11</option>" +
                "<option value=\"12\">12</option>" +
                "<option value=\"13\">13</option>" +
                "</select</div></td>" +

      "</tr></table>"+
      // For innerHTML onChange Jquery For duplicate Head avoid 
           "	jQuery(function($) {"+
	       " alert(\"nsk123\");"+
           " var backups = {};"+
           "$(\"select[id^=headNo]\").change(function() {"+
              "var v = $(this).val();"+
              "alert(v);"+
              "var f = false;"+
              "$(\"select[id^=headNo]\").not(this).each(function() {"+
              "alert(\"456\");"+
              "alert($(this).val());"+
                "if($(this).val() == v) {"+
                  " f = true;"+
                  "return;"+                
                " }"+
             " });"+
        "if(f) {"+
           " $(this).val(backups[$(this).attr(\"id\")]);"+
            "alert(\"Duplicated Head Value!\");"+
       " }"+
        "else {"+
            "backups[$(this).attr(\"id\")] = v;"+
       " }"+
    "}).val(null);"+
"});";

Open in new window


I added code like this is this correct ??
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40425846
put this in the head section :
<script>
jQuery(function($) {
    var backups = {};
    $(document).on("change", "select[id^=headNo]", function() {
        var v = $(this).val();
        var f = false;
        $("select[id^=headNo]").not(this).each(function() {
            if($(this).val() == v) {
                f = true;
                return;                
            }
        });
        if(f) {
            $(this).val(backups[$(this).attr("id")]);
            alert("dont choose this value!");
        }
        else {
            backups[$(this).attr("id")] = v;
        }
    }).val(null);
});
</script>

Open in new window

0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40434448
 if(f) {
            $(this).val(backups[$(this).attr("id")]);
            alert("dont choose this value!");
        }

Open in new window


     ///$(this).val(backups[$(this).attr("id")]);
this code the value is set when we are in new drop down

but when it save the value and change after that it will not set (bcz its says object)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40434700
assuming it don't do that on my test page, you must post a link to your page
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40436688
its interanet application . so i cant give the link ?

If you put alert message it will set the value . timing if we give it will set the value !

What is the real problem ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40437215
I don't know, my test page work.
Could you recreate your page somewhere ?
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40439141
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 40439431
in retrieve page,

Ist time the backup is not working if i select duplicate value then its going to blank ,

but after that 2nd time to n time  its working fine !

I dont know why the didnt work in 1st time ? do you have any idea
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…

895 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

13 Experts available now in Live!

Get 1:1 Help Now