aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Friday, July 22, 2011 Total Views:  

Here’s a very simple script which will add new item in DropDownList using jQuery.

 

Let us assume you have a DropDownList values as shown below.

<asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem Value="0">SELECT</asp:ListItem>

            <asp:ListItem Value="1">APPLE</asp:ListItem>

            <asp:ListItem Value="2">BANANA</asp:ListItem>

            <asp:ListItem Value="3">ORANGE</asp:ListItem>

            <asp:ListItem Value="4">MANGO</asp:ListItem>

        </asp:DropDownList>

 

Following jQuery code will add new item in DropDownList When user will enter text in textbox and click on button.

    <script type="text/javascript">

        $(function () {

            $("#btnClick").click(function () {

                var text = $("#<%=TextBox1.ClientID %>").val().toUpperCase();

                if (text.length > 0)

                    $("#<%=DropDownList1.ClientID %>").append($("<option>").val(text).text(text));

            });

        });

    </script>

 

We will use html button to add new item in DropDownList and textbox control to enter input.

        <input id="btnClick" type="button" value=" Click " />

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

 

Here’s an example

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Add new item in DropDownList using jQuery</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnClick").click(function () {

                var text = $("#<%=TextBox1.ClientID %>").val().toUpperCase();

                if (text.length > 0)

                    $("#<%=DropDownList1.ClientID %>").append($("<option>").val(text).text(text));

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   Input: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <br />

        <asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem Value="0">SELECT</asp:ListItem>

            <asp:ListItem Value="1">APPLE</asp:ListItem>

            <asp:ListItem Value="2">BANANA</asp:ListItem>

            <asp:ListItem Value="3">ORANGE</asp:ListItem>

            <asp:ListItem Value="4">MANGO</asp:ListItem>

        </asp:DropDownList>

        <br />

        <input id="btnClick" type="button" value=" Click " />

    </div>

    </form>

</body>

</html>


Output

Download

Add-new-Item-in-DropDownList.rar (719.00 bytes)

See live demo

Category: All | asp.net | Control
Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5