使用 jquery 填充多选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7252633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate multiselect box using jquery
提问by Hainlp
i can populate dropdownlist using jquery as below :
我可以使用 jquery 填充下拉列表，如下所示：
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 :
文件 function.aspx 与省列表功能：
[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 )
如何以上述相同的方式填充多选框，请帮助我。非常感谢。（我使用多选框插件http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/，但我可以从服务器填充数据）
回答by Rafay
not very clear but i think after you are done appending the options to the selectyou need to refresh it like
不是很清楚，但我认为在您完成将选项附加到select您需要刷新它之后
$("#province").multiselect('refresh');
see here http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#refresh
在这里看到http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#refresh
also instead of .removeAttryou can enable and disable the multi-select
也可以代替.removeAttr您启用和禁用多选
http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#enabledisable
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")
PS：您正在按 id 选择下拉列表，它就像$("#province")不像$("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");
}
});
});
