Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1947
  • Last Modified:

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??
0
Sathish David  Kumar N
Asked:
Sathish David  Kumar N
  • 11
  • 7
1 Solution
 
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
 
leakim971PluritechnicianCommented:
copy/paste
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 11
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now