how to avoid duplicate value selection in drop down

<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??
LVL 20
Sathish David  Kumar NAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Sathish David Kumar NAuthor Commented:
thanks how to include jquery.js file into another js file ??
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
leakim971PluritechnicianCommented:
copy/paste
0
 
Sathish David Kumar NAuthor Commented:
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
 
leakim971PluritechnicianCommented:
put the code after line 23 (line 2 to 19)
0
 
Sathish David Kumar NAuthor Commented:
actually dynamically create the drop down is a function(which i posted  )

Which code i want to put ? Jquery or ?
0
 
leakim971PluritechnicianCommented:
what did you try?
0
 
Sathish David Kumar NAuthor Commented:
i put your jquery code below the 23 line
0
 
Sathish David Kumar NAuthor Commented:
Inner HTML does not do the onchange proecess ??  Why ??
0
 
Sathish David Kumar NAuthor Commented:
......
       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
 
Sathish David Kumar NAuthor Commented:
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
 
Sathish David Kumar NAuthor Commented:
 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
 
leakim971PluritechnicianCommented:
assuming it don't do that on my test page, you must post a link to your page
0
 
Sathish David Kumar NAuthor Commented:
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
 
leakim971PluritechnicianCommented:
I don't know, my test page work.
Could you recreate your page somewhere ?
0
 
Sathish David Kumar NAuthor Commented:
0
 
Sathish David Kumar NAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.