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
-
What code do you already have? Besides, jQuery is JavaScript.Arjan– Arjan2011-05-21 04:28:16 +00:00Commented May 21, 2011 at 4:28
Add a comment
|
3 Answers
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)
Comments
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;
}
Comments
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)");
1 Comment
Vivekh
Thanks Muhammad Akhtar and Dorababu
