- Here have two list field menu. First
brand
seconditem
- I want if we
select
brand
IBM
thatitem
will selectIBM
too - In other hand, if we
select
brand
HP
thatitem
will selectHP
too
How to do that in javascript.
<select name="brand">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
<select name="item">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
- Here have two list field menu. First
brand
seconditem
- I want if we
select
brand
IBM
thatitem
will selectIBM
too - In other hand, if we
select
brand
HP
thatitem
will selectHP
too
How to do that in javascript.
<select name="brand">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
<select name="item">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
Share
Improve this question
asked Dec 29, 2009 at 14:07
wowwow
8,26917 gold badges54 silver badges63 bronze badges
1
- 2 I remend that you add ID attributes to your select elements. Most of the answers below are using document.getElementById('brand') and document.getElementById('name'). – Dan Polites Commented Dec 29, 2009 at 14:26
3 Answers
Reset to default 3I noticed your options line up with one another, so you could simply reflect the selectedIndex in in the second from the first:
document.getElementById("brand").onchange = function(){
document.getElementById("item").selectedIndex = this.selectedIndex;
}
<select name="brand" id="brand" onchange="document.getElementById('item').value = document.getElementById('brand').value">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
<select name="item" id="item">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
You can add an onchange attribute to your brand select element. When a brand is selected, then the selectItem function will be called, which in turn can select the item that matches the value in the item select element. Also, I remend that you give IDs to your select elements so that you can use document.getElementById("brand").
<select id="brand" name="brand" onchange="selectItem(this.selectedIndex);">
<option>Please Select</option>
<option>IBM</option>
<option>HP</option>
</select>
Here is the DOM reference for the select element: http://www.w3schools./jsref/dom_obj_select.asp