Question

I have two identical select boxes (aside from their names, of course), and I need to have the value of the second select box be set equal to the value of the first when a checkbox is checked. Here’s part of my code:

<form id="theForm" name="theForm">

<select name="stateSelect" id="stateSelect">
        <option value="AL">Alabama</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
</select>

<select name="stateSelect2" id="stateSelect2">
        <option value="AL">Alabama</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
</select>

<input type="checkbox" name="checky" onClick="doStuff()">
</form>

doStuff() 
{
    // change it from here
}

So, I’ve tried a bunch of different things, including code I’ve found on forums and on SO, but nothing seems to work. What code should I have in my javascript function so that when the function runs the second select box is set equal to the first?

Thanks for your help!

Answer 1

Try this:

var s1=document.getElementById('stateSelect');
var s2=document.getElementById('stateSelect2');
s1.onchange=function(){
    s2.value=s1.value;
}

Demo: http://jsfiddle.net/rLEvD/