Link to home
Start Free TrialLog in
Avatar of goevan
goevan

asked on

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.
Avatar of goevan
goevan

ASKER

Dang, tried to make it 1000 points, but it wouldn't let me.
Avatar of cLFlaVA
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>
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
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>

Avatar of dakyd
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>
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
remove the </dd>
Avatar of cLFlaVA
cLFlaVA
my suggestion will also work with the onload.
Avatar of cLFlaVA
cLFlaVA
ahh i see what you are saying.
Avatar of goevan
goevan

ASKER

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.
Avatar of cLFlaVA
cLFlaVA
lol, was afraid of that.  was trying to get it as dynamic as possible :)
Avatar of goevan
goevan

ASKER

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>
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
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) ">
Avatar of goevan
goevan

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of cLFlaVA
cLFlaVA
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dakyd
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>
Avatar of dakyd
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.
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
Thanks dakyd, yes I left the onchange in the unaffected menu, just remove it. Sorry
Avatar of goevan
goevan

ASKER

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

Thanks,
goevan