Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
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
17
Medium Priority
?
300 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
Comment
Question by:goevan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 4
  • +1
17 Comments
 

Author Comment

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

Expert Comment

by:cLFlaVA
ID: 12436856
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
ID: 12436913
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
Technology Partners: 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!

 
LVL 19

Expert Comment

by:dakyd
ID: 12436915
>>  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
ID: 12436922
remove the </dd>
0
 
LVL 13

Expert Comment

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

Expert Comment

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

Author Comment

by:goevan
ID: 12437407
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
ID: 12437471
lol, was afraid of that.  was trying to get it as dynamic as possible :)
0
 

Author Comment

by:goevan
ID: 12437582
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
ID: 12437659
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
ID: 12437815
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:
cLFlaVA earned 2000 total points
ID: 12438071
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
ID: 12438085
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
ID: 12438096
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
ID: 12438376
Thanks dakyd, yes I left the onchange in the unaffected menu, just remove it. Sorry
0
 

Author Comment

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

Thanks,
goevan
0

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

636 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