javascript to select dropdownlist automatically based on another dropdown

Question

I am having 2 dropdown lists on my page if i select an item the same selected item should be displayed in another drop down list. Can any one give me a javascript for this i need Javascript not Jquery

Answer 1

You can attach an onchange event on your dropdown. Then whenever your selected Index changes, it will fire and call the supplied update method. For example:

HTML

<asp:DropDownList id="FirstDropdown" onChange="javascript:update();" ...>

JavaScript

<script type="text/javascript">
function update ( ) {        
   document.getElementById('<%= SecondDropdown.ClientID %>').value =
   document.getElementById('<%= FirstDropdown.ClientID %>' ).value;        
}

Answer 2

here is a very simple implementation of what you are describing:

given the html:

<select id="select1">
  <option value="foo">foo</option>
  <option value="bar">bar</option>
</select>
<select id="select2">
  <option value="foo">foo</option>
  <option value="bar">bar</option>
</select>

and this javascript:

document.getElementById('select1').onchange = function(e) {
  var index = this.selectedIndex;
  document.getElementById('select2').options[index].selected = true;
}

you can achieve what you want. note the indexes should be exactly the same in both select boxes (as in the options should be in the same order)

Answer 3

Try this

<asp:DropDownList ID="ddl1" runat="server">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem Value="4"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem></asp:ListItem>
        </asp:DropDownList>



  <script type="text/javascript">
function MyApp(sender){
    var lbMatch = false;
    var loDDL2 = document.getElementById('DropDownList1');
    for(var i=0; i< loDDL2.length-1; i++){
        lbMatch = sender.value==loDDL2.options[i].value;       
        lsSelected = lbMatch ? "<=SELECTED" : "";
        if(lbMatch)
            loDDL2.selectedIndex = sender.selectedIndex;
    }
}
        </script>

In page load event add this

  ddl1.Attributes.Add("OnChange", "MyApp(this)");