Bri*_*ist 5 javascript jquery html5 select jquery-chosen
我在http://harvesthq.github.io/chosen/中选择了使用。好的,我测试它从ajax加载数据。我在任何地方都能找到,也许没有人成功。
<script src="theme/js/jQuery-2.1.3.min.js"></script>
<link href="theme/chosen_v1.4.2/chosen.css" rel="stylesheet" />
<script src="theme/chosen_v1.4.2/chosen.jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(".cb_bu_info").chosen({
width: "95%",
source: function (data) {
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LIST_BU",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#cb_info").html('');
//$.each($.parseJSON(data.d), function (idx, obj) {
$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
//$("#cb_info").trigger("liszt:updated");
},
error: function (data) {
console.log(data.d);
}
});
}
});
$("#cb_info").trigger("liszt:updated");
});
</script>Run Code Online (Sandbox Code Playgroud)
<select id="cb_info" class="cb_bu_info"></select>Run Code Online (Sandbox Code Playgroud)
数据形式的ajax为
[{"BU_ID":"B01","BU_NAME":"Agro Feed","BU_DES":"Agro Feed","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false},{"BU_ID":"B02","BU_NAME":"Agro Farm","BU_DES":"Agro Farm","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false}]
Run Code Online (Sandbox Code Playgroud)
好吧,看起来还可以,但是当我运行它时,结果没有显示在select选项中,请参阅浏览器开发工具,但我没有看到错误。没事,这是怎么回事?注意:仅使用选择的jQuery
查看选择的文档后,似乎没有“源”选项。您需要做的是首先运行 Ajax 调用,然后填写您选择的选项。一旦选择全部填充,然后在该选择元素上运行“Chosen”。
我会使用以下 JS 代码:
var url = "../BUS/WebService.asmx/LIST_BU";
$.getJSON(url, function(json){
var $select_elem = $("#cb_info");
$select_elem.empty();
$.each(json, function (idx, obj) {
$select_elem.append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$select_elem.chosen({ width: "95%" });
})
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
22810 次 |
| 最近记录: |