Solved

If checkbox = 1 (onclick and onload), make multiple drop downs the same value as one of them is changed

Posted on 2004-10-28
277 Views
Last Modified: 2012-06-27
I have up to 11 drop down menus and a checkbox. When the checkbox is selected or if it's selected onload of the page, I need all the particular drop down menus to be enabled to be the same value.

Then when anyone of the drop down values are changed, it will change the value in all the other drop downs.

They should probably be change by ID since I have other drop downs on the page.

So,
When this checkbox is selected, it toggles the menus /enables them to be the same value and that value needs to be selected in the menu.

<input type="checkbox" name="MakeAESameValue" value="1">

<select name="select1">
     <option value="value1">Value 1</option>
     <option value="value2">Value 2</option>
     <option value="value3">Value 3</option>
</select>
<select name="select2">
     <option value="value1">Value 1</option>
     <option value="value2">Value 2</option>
     <option value="value3">Value 3</option>
</select>
<select name="select3">
     <option value="value1">Value 1</option>
     <option value="value2">Value 2</option>
     <option value="value3">Value 3</option>
</select>


Yes, big points, very urgent and seems like it would be pretty custom/difficult.
0
Question by:goevan
    17 Comments
     

    Author Comment

    by:goevan
    Dang, tried to make it 1000 points, but it wouldn't let me.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Here's one solution:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>new document</title>

    <script language="javascript" type="text/javascript">
    <!--

    var linked = false;

    function makeChange(si, f) {
        var e = f.elements;
          if (linked) {
                for (var i = 0; i < e.length; i++) {
                  if (e[i].type == 'select-one') e[i].selectedIndex = si;
                }
          }
    }

    -->
    </script>

    </head>

    <body onload="linked = document.f.MakeAESameValue.checked;">
    <form name="f">

    <input type="checkbox" name="MakeAESameValue" value="1" onclick="linked = this.checked;">

    <select name="select1" onchange="makeChange(this.selectedIndex, this.form);">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select2" onchange="makeChange(this.selectedIndex, this.form);">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select3" onchange="makeChange(this.selectedIndex, this.form);">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>

    </form>
    </body>

    </html>
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    try this


    <head>
    <script>
    function update(val){
    sels=document.getElementById('d').getElementsByTagName('select')
    for (i=0;i<sels.length;i++)
      for (j=0;j<sels[i].options.length;j++)
         if (sels[i].options[j].value==val)
               sels[i].selectedIndex=j
    }
    </script>
    </head>

    <body onload="update(document.getElementById('MakeAESameValue').value )">
    <div id="d">
    <input type="checkbox" name="MakeAESameValue" value="value2" onclick=" update(this.value) ">

    <select name="select1" id="s" size="1" onchange=" update(this.value) ">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
      </select> <select name="select2" id="2" size="1" onchange=" update(this.value) ">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
      </select> <select name="select3" size="1" onchange=" update(this.value) ">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
      </select> </dd>
    </div>

    <p>Uneffected select
    <select name="select3" size="1" onchange=" update(this.value) ">
      <option value="value1">Value 1</option>
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
    </select>
    </body>

    0
     
    LVL 19

    Expert Comment

    by:dakyd
    >>  or if it's selected onload of the page
    Here's another possible solution, but this one will also account for the onload possibility you asked for.  As an example, I set the checkbox to checked and selected the 2nd option onload.  Note, onload it will automatically set all the drop downs to whatever the first drop down has selected.  Onchange, it will just set all three drop downs to whichever choice you just selected.  Hope that helps.

    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {myChange(document.getElementById("select1"));};

    function myChange(obj)
    {
      var sel1 = document.getElementById("select1");
      var sel2 = document.getElementById("select2");
      var sel3 = document.getElementById("select3");

      var chkbox = document.getElementById("MakeAESameValue");
      if (chkbox.checked)
      {
        sel1.options.selectedIndex = obj.options.selectedIndex;
        sel2.options.selectedIndex = obj.options.selectedIndex;
        sel3.options.selectedIndex = obj.options.selectedIndex;
      }
    }
    </script>
    </head>

    <body>

    <input type="checkbox" name="MakeAESameValue" id="MakeAESameValue" value="1" checked="true">

    <select name="select1" id="select1" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2" selected>Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select2" id="select2" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select3" id="select3" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>

    </body>
    </html>
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    remove the </dd>
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    my suggestion will also work with the onload.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    ahh i see what you are saying.
    0
     

    Author Comment

    by:goevan
    cLFlaVA's works great except it changes all the select menus on the page. I have several other select menus that cannot change when this function occurs. I'll check the others.

    Thanks for the quick responses.

    goevan.
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    lol, was afraid of that.  was trying to get it as dynamic as possible :)
    0
     

    Author Comment

    by:goevan
    Yes, dynamic is the problem. The number of effected menus is dynamic. So, it should be dynamic.

    However, with dakyd's solution, if I set the number of variables to the highest number of selects the page could have, do you foresee any js errors? I don't get any, but was wondering.

    Also, I like the window.onload better than the body onload, but if there are other js fuctions, including form validators. Will this window.onload mess with those?

    I'll check it out.

    Thanks.


    <script type="text/javascript">
    window.onload = function() {myChange(document.getElementById("select1"));};

    function myChange(obj)
    {
      var sel1 = document.getElementById("select1");
      var sel2 = document.getElementById("select2");
      var sel3 = document.getElementById("select3");
          var sel4 = document.getElementById("select3");
          var sel5 = document.getElementById("select3");
          var sel6 = document.getElementById("select3");
          var sel7 = document.getElementById("select3");
          
      var chkbox = document.getElementById("MakeAESameValue");
      if (chkbox.checked)
      {
        sel1.options.selectedIndex = obj.options.selectedIndex;
        sel2.options.selectedIndex = obj.options.selectedIndex;
        sel3.options.selectedIndex = obj.options.selectedIndex;
                sel4.options.selectedIndex = obj.options.selectedIndex;
                sel5.options.selectedIndex = obj.options.selectedIndex;
                sel6.options.selectedIndex = obj.options.selectedIndex;
                sel7.options.selectedIndex = obj.options.selectedIndex;
      }
    }
    </script>
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    did mine not work?

    I think I need to change the checkbox to
     <input type="checkbox" name="MakeAESameValue" value="value2" onclick="if (this.checked) update(this.value) ">
    0
     

    Author Comment

    by:goevan
    GwynforWeb,
    Well....yours changes the value onload. And it changes all the values when the non-effected menu is changed.

    Really,

    cLFlaVA's works except it changes all the other selects on the page.

    And dakyd's works except if the checkbox is checked onload of the page, it makes all the values the same. They need to change when a user makes a selection only.

    Is there any way to fix either of these 2?

    Thanks,
    goevan

    0
     
    LVL 13

    Accepted Solution

    by:
    Well, dakyd's will only work for the three select boxes in the example.

    My suggestion is:  name the select boxes of question similar names: coolSel1, coolSel2, coolSel3, etc.

    Then, change my function slightly:

    function makeChange(si, f) {
        var e = f.elements;
         if (linked) {
              for (var i = 0; i < e.length; i++) {
                 if (e[i].type == 'select-one' && e[i].name.indexOf('coolSel') != -1) e[i].selectedIndex = si;
              }
         }
    }


    This will perform the changes to any and all select boxes with the name "coolSel..."
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    Oh, I guess I misunderstood you then.  GwynForWeb's answer is more or less what you want then, with one slight change.  You remove the onchange handler from the very last select, the one that should be affected.  All selects that should be affected when the checkbox is checked should be within the "affectedSels" <div>.  You don't even have to give your select's id's or names and this particular script will still work properly.  Anyhow, hope that helps.

    <html>
    <head>
    <script type="text/javascript">
    function myChange(obj)
    {
      var chkbox = document.getElementById("MakeAESameValue");
      if (chkbox.checked)
      {
        var sels = document.getElementById("affectedSels").getElementsByTagName("select");
        for (var i = 0, n = sels.length; i < n; i ++)
          sels[i].options.selectedIndex = obj.options.selectedIndex;
      }
    }
    </script>
    </head>

    <body>

    <input type="checkbox" name="MakeAESameValue" id="MakeAESameValue" value="1" /> Make the next row of checkboxes the same

    <div id="affectedSels">
    <select name="select1" id="select1" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select2" id="select2" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select3" id="select3" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select4" id="select4" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    <select name="select4" id="select4" onchange="myChange(this)">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    </div>

    <p>
    Now for the Select that isn't affected by the others
    <select name="otherSel" id="otherSel">
         <option value="value1">Value 1</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
    </select>
    </p>

    </body>
    </html>
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    Bah, can't type ... meant to say

    >> You remove the onchange handler from the very last select, the one that should *NOT* be affected.
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    Thanks dakyd, yes I left the onchange in the unaffected menu, just remove it. Sorry
    0
     

    Author Comment

    by:goevan
    Heck yeah cLFlaVA! That's exactly what I was looking for.

    Thanks,
    goevan
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    Both jQuery and Mootools offer some nice, easy to use scripts. Mootools is best known for their interactive slideshows and jQuery for their menus, but both have many other uses as well.   jQuery is basically a toolkit with many DOM (http://en.wik…
    In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    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…

    860 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