Setting selected item in dropdown

(JQUERY)


Hi,
In this article i am setting selected item in multiple dropdowns using jquery, on the click of link buttons.

.aspx page

<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>

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/3/2013
7/3/2013
Download PDF

Comments