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 NArchitectAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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 NArchitectAuthor Commented:
thanks how to include jquery.js file into another js file ??
0
leakim971PluritechnicianCommented:
copy/paste
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Sathish David Kumar NArchitectAuthor 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 NArchitectAuthor 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 NArchitectAuthor Commented:
i put your jquery code below the 23 line
0
Sathish David Kumar NArchitectAuthor Commented:
Inner HTML does not do the onchange proecess ??  Why ??
0
Sathish David Kumar NArchitectAuthor 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 NArchitectAuthor 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
leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sathish David Kumar NArchitectAuthor 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 NArchitectAuthor 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 NArchitectAuthor Commented:
0
Sathish David Kumar NArchitectAuthor 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.