Populate multiselect box using jquery

Question

i can populate dropdownlist using jquery as below :

Dropdownlist :

<select id="province"></select>

Script code :

$(document).ready(function(){
    $.ajax({
            type: "POST",
            url: "function.aspx/provincelist",
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function OnPopulateControl(response) {
                list = response.d;
                if (list.length > 0) {
                    $("province").removeAttr("disabled");
                    $("province").empty().append('<option value="0">Please select</option>');
                    $.each(list, function () {
                        $("province").append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                    $("province").val(valueselected);
                }
                else {
                    $("province").empty().append('<option selected="selected" value="0">Not available<option>');
                }
            },
            error: function () {
                alert("Error");
            }
        });

});

File function.aspx with provincelist function :

[System.Web.Services.WebMethod]
    public static ArrayList provincelist()
    {
        ArrayList List = new ArrayList();
        SqlConnection con = DBclass.moketnoi();
        SqlCommand cmd = new SqlCommand("SELECT TC_CODE, TC_NAME FROM PM_PROVINCE", con);
        SqlDataReader sdr = cmd.ExecuteReader();
        while (sdr.Read())
        {
            List.Add(new ListItem(
                sdr["TC_NAME"].ToString(),
                sdr["TC_CODE"].ToString()
                ));
        }
        con.Close();
        return List;
    }

How can I populate multi-select box by the same way above, please help me. Thanks so much. (i use multi-select box plugin http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/, but I can populate with data from server )

What's your actual question then? You want a multiselect box. Have you tried repeating the pattern above with ``? — p.campbell, Aug 31 '11 at 04:48
@Hainlp id selector is written like `$("#province")` notice the `#` sign before the `id` — Rafay, Aug 31 '11 at 05:06
Is there a reason you're using ajax to populate the select? Is the list of Providences going to change often? I noticed you're not passing any data to asp, so unless you're updating the database the list is always going to be the same. — Rusty Jeans, Aug 31 '11 at 05:08

Rafay · Accepted Answer · 2011-08-31T05:12:46.733

11

not very clear but i think after you are done appending the options to the select you need to refresh it like

$("#province").multiselect('refresh');

see here http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#refresh

also instead of .removeAttr you can enable and disable the multi-select

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#enabledisable

P.S: you are selecting the dropdown by id and it goes like $("#province") NOT like $("province")

have a look at jquery id selectors

your complete code may look like

<select id="province" multiple="multiple"></select>

-

$(document).ready(function(){
    var $select = $("#province").multiselect();//apply the plugin
    $select.multiselect('disable'); //disable it initially
    $.ajax({
            type: "POST",
            url: "function.aspx/provincelist",
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function OnPopulateControl(response) {
                list = response.d;
                if (list.length > 0) {
                    $select.multiselect('enable');
                    $("#province").empty().append('<option value="0">Please select</option>');
                    $.each(list, function () {
                        $("#province").append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                    $("#province").val(valueselected);
                }
                else {
                    $("#province").empty().append('<option selected="selected" value="0">Not available<option>');
                }
              $("#province").multiselect('refresh'); //refresh the select here
            },
            error: function () {
                alert("Error");
            }
        });

});

edited Aug 31 '11 at 05:12

answered Aug 31 '11 at 04:50

Rafay

30,950
5
68
101

it work with error : parent_20047 is null . I dont know about this. – Hainlp Aug 31 '11 at 07:13
But about 40 seconds appear an error : parent_2403 is null (document.write('');) – Hainlp Aug 31 '11 at 07:31
1

its difficult to tell from the error but some variable in your code seems to be `undefined` for example i dont see `valueselected` being initialized or assigned a value... – Rafay Aug 31 '11 at 07:43
I remomed $("#province").val(valueselected); . I think the multiselect.js file have issue. There are 4 error oElement is null, parent_26728 is null, parent_13432 is null, ... in 3 minutes – Hainlp Aug 31 '11 at 07:47
i dont think that the `multiselect.js` has issues does `this['Value']` and `this['Text']` return correct values? you can use `console.log(this['Text'])` and see in the firebug(firefox extension) console if it has logged the correct value – Rafay Aug 31 '11 at 07:53
Yes i use console.log(this['Text']) and it has correct value. But still error parent_7684 is null Failed to load source for: document.write(' – Hainlp Aug 31 '11 at 08:04
it link to http://bs.serving-sys.com/..... Could you instruct me how to searching the best solution. – Hainlp Aug 31 '11 at 08:21
one thing i am certain of that this error is coming from else where form your code, try debugging the rest of your code for possible errors – Rafay Aug 31 '11 at 08:33
Thanks so much for your strong supporting. :) – Hainlp Aug 31 '11 at 08:33
Hi 3nigma : How can i set 2 items are selected when populate multiselect. Please help me – Hainlp Sep 14 '11 at 03:13
it is advice-able to make a new question so that if i am not able to help may be somebody else will answer it so your chance of getting an answer increases ... also add relevant code to your question – Rafay Sep 14 '11 at 04:02

Populate multiselect box using jquery

1 Answers1

Linked