HIi am trying to bind data to multi select list box in jqueryhere is code function GetPlotsbyReservationdistrict industryrsvr ajax type 34POST34 url 34kiadbasmxGetPlotsbyReservation34 data 3439District393934 district 343939industry393934 industry 343939rsvr393934 rsvr 343934 contentType 34applicationjson charsetutf834

Hi veenahosurRefer the below sampleHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltlink rel34stylesheet34 type34textcss34 href34httpcdnjscloudflarecomajaxlibstwitterbootstrap303cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpcdnjscloudflarecomajaxlibstwitterbootstrap303jsbootstrapminjs34gtltscriptgt ltlink rel34stylesheet34 type34textcss34 href34httpcdnrawgitcomdavidstutzbootstrapmultiselectmasterdistcssbootstrapmultiselectcss34 gt ltscript type34textjavascript34 src34httpcdnrawgitcomdavidstutzbootstrapmultiselectmasterdistjsbootstrapmultiselectjs34gtltscriptgt ltscript

Populate ListBox using jQuery AJAX and apply Bootstrap MultiSelect plugin in ASP.Net

veenahos...

SOLVED CLOSED ACTIVE ANSWERED
User: veenahosur
Posted: on Dec 07, 2016 04:51 AM
Forum: Bootstrap
Answer: 1
Views: 18333
Sample Code: Download

HI,

i am trying to bind data to multi select list box in jquery

here is code:

  function GetPlotsbyReservation(district, industry,rsvr) {
        $.ajax({
            type: "POST",
            url: "kiadb.asmx/GetPlotsbyReservation",
            data: "{'District':'" + district + "','industry':'" + industry + "','rsvr':'" + rsvr + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError
        });

        function OnSuccess(data, status) {
            var myObject = JSON.parse(data.d);

            var len = myObject.length;
            var listItems = "";
        
            for (var i = 0; i < len; i++) {
                $('#ddlPlot').append('<option value="' + myObject[i].rsvr + '">' + myObject[i].rsvr + '</option>');
               
               
            }
       
        }

        function OnError(request, status, error) {
            alert(request.statusText);
        }
    }

 <asp:ListBox ID="ddlPlot" runat="server" SelectionMode="Multiple" ></asp:ListBox>

data is not binding to list box.can any one help me

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Dec 09, 2016 03:28 AM
Modified: on Dec 19, 2017 02:46 AM
Report

Hi veenahosur,

Refer the below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />
    <script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
        $(function () {
            var district = '', industry = '', rsvr = '';
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetPlotsbyReservation",
                data: "{'District':'" + district + "','industry':'" + industry + "','rsvr':'" + rsvr + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var lstindustrialareadetails = $("[id*=ddlPlot]");
                    lstindustrialareadetails.empty();
                    $.each(r.d, function () {
                        lstindustrialareadetails.append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                    $('[id*=ddlPlot]').multiselect({ includeSelectAllOption: true });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ListBox ID="ddlPlot" runat="server" SelectionMode="Multiple"></asp:ListBox>
    </form>
</body>
</html>

Code

[WebMethod]
public static List<industrialareadetails> GetPlotsbyReservation(string District, string industry, string rsvr)
{
    string query = "SELECT TOP 5 CustomerId,Name FROM Customers";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<industrialareadetails> industrialareadetails = new List<industrialareadetails>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    industrialareadetails.Add(new industrialareadetails { Value = sdr["CustomerId"].ToString(), Text = sdr["Name"].ToString() });
                }
            }
            con.Close();
            return industrialareadetails;
        }
    }
}

public class industrialareadetails
{
    public string Value { get; set; }
    public string Text { get; set; }
}

Screenshot

Populate ListBox using jQuery AJAX and apply Bootstrap MultiSelect plugin in ASP.Net

Company

Explore

Follow us

Contact Us