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

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.
goevanAsked:
Who is Participating?
 
cLFlaVACommented:
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
 
goevanAuthor Commented:
Dang, tried to make it 1000 points, but it wouldn't let me.
0
 
cLFlaVACommented:
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
Ultimate Tool Kit for Technology Solution Provider

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

 
GwynforWebCommented:
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
 
dakydCommented:
>>  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
 
GwynforWebCommented:
remove the </dd>
0
 
cLFlaVACommented:
my suggestion will also work with the onload.
0
 
cLFlaVACommented:
ahh i see what you are saying.
0
 
goevanAuthor Commented:
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
 
cLFlaVACommented:
lol, was afraid of that.  was trying to get it as dynamic as possible :)
0
 
goevanAuthor Commented:
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
 
GwynforWebCommented:
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
 
goevanAuthor Commented:
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
 
dakydCommented:
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
 
dakydCommented:
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
 
GwynforWebCommented:
Thanks dakyd, yes I left the onchange in the unaffected menu, just remove it. Sorry
0
 
goevanAuthor Commented:
Heck yeah cLFlaVA! That's exactly what I was looking for.

Thanks,
goevan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.