Preselect the option in multiple dropdowns by jquery, on the click of link buttons.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
function selectdropDown(txt) {
var drp1 = document.getElementById('<%=drp_colors1.ClientID%>');
var drp2 = document.getElementById('<%=drp_colors2.ClientID%>');
var drp3 = document.getElementById('<%=drp_colors3.ClientID%>');
if (drp1.options[drp1.selectedIndex].value == "--Select Colors--") {
$(drp1).find("option[value='"+txt+"']").prop('selected', true);
}
else if (drp2.options[drp2.selectedIndex].value == "--Select Colors--") {
$(drp2).find("option[value='" + txt + "']").prop('selected', true);
}
else if (drp3.options[drp3.selectedIndex].value == "--Select Colors--") {
$(drp3).find("option[value='" + txt + "']").prop('selected', true);
}
}
</script> </head>
<body style="background-color:lightgray;">
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="drp_colors1" runat="server">
<asp:ListItem>--Select Colors--</asp:ListItem>
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
</asp:DropDownList><br />
<asp:DropDownList ID="drp_colors2" runat="server">
<asp:ListItem>--Select Colors--</asp:ListItem>
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
</asp:DropDownList><br />
<asp:DropDownList ID="drp_colors3" runat="server">
<asp:ListItem>--Select Colors--</asp:ListItem>
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
</asp:DropDownList><br />
<br />
<asp:LinkButton runat="server" OnClientClick="selectdropDown('Red');" ID="lnk_colors1" Text="Red" />
<br />
<asp:LinkButton runat="server" OnClientClick="selectdropDown('Green');" ID="lnk_colors2" Text="Green" />
<br />
<asp:LinkButton runat="server" OnClientClick="selectdropDown('Blue');" ID="lnk_colors3" Text="Blue" />
</div>
</form>
</body>
</html>
No comments:
Post a Comment