使用jQuery填充多选框 [英] Populate multiselect box using jquery

问题描述

我可以使用jquery填充下拉列表，如下所示:

i can populate dropdownlist using jquery as below :

下拉列表:

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

脚本代码:

$(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");
            }
        });

});

带有provinlistlist函数的文件function.aspx:

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

如何以上述相同方式填充多选框，请帮助我.非常感谢. (我使用多选框插件 http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/，但我可以填充服务器中的数据

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 )

推荐答案

不太清楚，但是我认为在将选项附加到select之后，您需要像

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');

请参见 http://www.erichynds.com/examples/jquery- ui-multiselect-widget/demos/#refresh

也可以代替.removeAttr启用和禁用多选

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:您正在按ID选择下拉列表，其外观类似于$("#province") 不喜欢 $("province")

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

看看 jquery id选择器

您的完整代码可能类似于

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");
            }
        });

});

这篇关于使用jQuery填充多选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！