change multiple select boxes

[athanasiusrc]

Is there a way to change the value in a select box and have all select boxes on a page change to the same value?

[mjdamato]

Yes.

<script type="text/javascript">
function changeSelects() {
value = document.getElementById('select1').value
document.getElementById('select2').value = value;
document.getElementById('select3').value = value;
document.getElementById('select4').value = value;
}
</script>
<select name="select1" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>
<select name="select2" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>
<select name="select3" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>
<select name="select4" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>

[athanasiusrc]

Nope. That didn't work. I tried the sample and nothing happened. I tried adding id values to the select boxes and nothing happened. I tried integrating it in our site and nothing happened.

[athanasiusrc]

Never mind. I got it. The code should look like this:


<script type="text/javascript">
function changeSelects() {
value = document.getElementById('select1').value;
document.getElementById('select2').value = value;
document.getElementById('select3').value = value;
document.getElementById('select4').value = value;
}
</script>
<select name="select1" onchange="changeSelects()">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>
<select name="select2" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>
<select name="select3" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>
<select name="select4" onchange=";">
<option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option>
</select>

[athanasiusrc]

Okay, I thought I had it but I was wrong. It works for the demo but I can't get it to work live. I keep getting an error that "document.getElementById("selectMultiple") has no properties"

This is the javascript I'm using:

<script type="text/javascript">
function changeSelects() {
value = document.getElementById('selectMultiple').value;
document.getElementById('status_1').value = value; document.getElementById('status_2').value = value;
}
</script>

This is the initial select box:

<select name="selectMultiple" class="smsidetextblk" onChange="changeSelects()">

<option value="26">Back Order</option>

<option value="38">Cancelled</option>


<option value="41">Cancelled - Item Discontinued</option>

<option value="40">Cancelled - Please Call With Credit Card</option>

<option value="39">Cancelled - Please Send Check</option>

<option value="6">Card Did Not Process. Call 866-428-2820</option>

<option value="44">Complete</option>

<option value="35">Customer Will Pick Up</option>


<option value="48">Delivered</option>

<option value="37">Foreign Order - Possible Hold</option>

<option value="42">In Production</option>

<option value="4">Is Being Processed</option>

<option value="21">Multiple Shipments - Order Complete</option>

<option value="32">On Order</option>


<option value="2">Order Complete</option>

<option value="5">Partially Shipped</option>

<option value="10">Pending Check Clearance</option>
</select>

And this is one of the select boxes that should be changing:

<select name="status_1" onchange=";" class="smsidetextblk">

<option value="26">Back Order</option>

<option value="38">Cancelled</option>


<option value="41">Cancelled - Item Discontinued</option>

<option value="40">Cancelled - Please Call With Credit Card</option>

<option value="39">Cancelled - Please Send Check</option>

<option value="6">Card Did Not Process. Call 866-428-2820</option>

<option value="44">Complete</option>

<option value="35">Customer Will Pick Up</option>


<option value="48">Delivered</option>

<option value="37">Foreign Order - Possible Hold</option>

<option value="42">In Production</option>

<option value="4">Is Being Processed</option>

<option value="21">Multiple Shipments - Order Complete</option>

<option value="32">On Order</option>


<option value="2">Order Complete</option>

<option value="5">Partially Shipped</option>

<option value="10">Pending Check Clearance</option>
</select>

[coppocks]

Thats because the ID for getElementById('selectMultiple') doesn't exist here:

<select name="selectMultiple" class="smsidetextblk" onChange="changeSelects()">

Change the above by adding the ID to:

<select ID="selectMultiple" name="selectMultiple" class="smsidetextblk" onChange="changeSelects()">

[athanasiusrc]

That did it. Funny, the initial code worked without setting the id field.

[mjdamato]

Sorry, my fault. I made a couple quick edits before posting the code and left off the function call. And, i also forgot to add the ids.