Home > JQuery > How to bind a dropdownlist using Jquery



How to bind a dropdownlist using Jquery

In this article, we have described how to bind a Dropdownlist using Jquery in asp.net with an example.


In this article, we have described how to bind a Dropdownlist using Jquery in asp.net with an example.

We have provided a sample code with an example. It's a simple and easy way to bind a Dropdownlist in jquery.

 

Required Namespaces:

you will need to use the following namespaces.

using Newtonsoft.Json;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

 

Html Page

We have used the Dropdownlist and explained jquery code below. You can have a look at it and learn.

<html>

<head runat="server">

    <title>how to bind dropdownlist using Jquery</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <script>

        $(document).ready(function () {

            $.ajax({

                type: "POST",

                url: "Default4.aspx/Getusers",

                data: '',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    var json = JSON.parse(data.d);

                    var option = json.map(x => "<option value='" + x.userid + "'>" + x.Username + "</option>");

 

                    //HTML dropdownlist

                    $("#ddlUserinfo").html('<option value="-1">All</option>');

                    $("#ddlUserinfo").append(option.join(' '));

 

                    //  Asp dropdownlist

                    $('[id*=Aspdropdownlist]').html('<option value="-1">All</option>');

                    $('[id*=Aspdropdownlist]').append(option.join(' '));

                }

            });

        });

 

        function OnSubmit()

        {

            alert("ASP Control:" + $("[id*=Aspdropdownlist] option:selected").text());

            alert("HTML Control:" + $("#ddlUserinfo option:selected").text());

            return false;

        }

    </script>

</head>

<body>

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

        <div class="col-md-12">

            <div class="col-md-6">

                <div>

                    <strong>Html Dropdownlist control</strong>

                    <select id="ddlUserinfo" class="form-control">

                    </select>

                </div>

            </div>

        </div>

        <br />

        <br />

        <div class="col-md-12">

            <div class="col-md-6">

                <div>

                    <strong>Asp Dropdownlist control </strong>

                    <asp:DropDownList ID="Aspdropdownlist" runat="server" class="form-control">

                    </asp:DropDownList>

                </div>

            </div>

        </div>

        <br />

        <br />

        <div class="col-md-12">

            <div class="col-md-6">

                <div>

                    <button type="button" class="btn btn-primary" onclick="OnSubmit()">Submit</button>

                </div>

            </div>

        </div>

    </form>

</body>

</html>

 

C# code

[WebMethod]

    public static string Getusers()

    {

        try

        {

            string connnection = Convert.ToString(ConfigurationManager.ConnectionStrings["Connection"]);

            SqlConnection con = new SqlConnection(connnection);

            SqlCommand cmd = new SqlCommand("Select *  from users", con);

            SqlDataAdapter sda = new SqlDataAdapter(cmd);

            DataTable dt = new DataTable();

            sda.Fill(dt);

            return JsonConvert.SerializeObject(dt);

        }

        catch (Exception ex)

        {

            throw ex;

 

        }

    }

 

Screenshot

 

how to bind dropdownlist using Jquery

 

 

Download




Note: All contents are copyright of their authors.



Comments



Leave a Reply

Comment:*
Email ID:*


Name:*