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
Solved

how to avoid duplicate value selection in drop down

Posted on 2014-11-03
18
1,506 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html Table looping 4 25
IFrame in MVC 2 23
Wordpress Only run code if on a certain page 11 23
Using Modal's in to Retrieve Data from MySql and Populate Forms 13 38
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

828 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