Reputation: 1099
The below html code has 2 different select tags with same options. If the user changes one of them i also want that the value in the other select tag also changes. I have a javascript function that does that but it is not working ?
function change(str) {
document.getElementById("select-choice-direction-user")
.selectedIndex = document.getElementById("select-choice-direction")
.selectedIndex;
}
<select name="select-choice-direction" id="select-choice-direction" data-native-menu="false" onchange="change(this);">
<option value="1">1 Blueridge-McKee GoLine</option>
<option value="2">2 Bluejay-Huntingdon GoLine</option>
<option value="3">3 Clearbrook-UFV GoLine</option>
<option value="4">4 Saddle</option>
<option value="5">5 Hospital</option>
<option value="6">6 Gladwin-Peardonville</option>
</select>
<select name="select-choice-direction-user" id="select-choice-direction-user" data-native-menu="false" onchange="change(this);">
<option value="1">1 Blueridge-McKee GoLine</option>
<option value="2">2 Bluejay-Huntingdon GoLine</option>
<option value="3">3 Clearbrook-UFV GoLine</option>
<option value="4">4 Saddle</option>
<option value="5">5 Hospital</option>
<option value="6">6 Gladwin-Peardonville</option>
</select>
Upvotes: 0
Views: 202
Reputation: 360912
Different IDs:
<select name="select-choice-direction-user" id="select-choice-direction-user"
No 'n'----^
document.getElementById("select-choice-direction-usern").selectedIndex =
^--- Has an 'n'
Upvotes: 2