编程语言
首页 > 编程语言> > javascript – 如何将数据从ajax加载到选择的jquery?

javascript – 如何将数据从ajax加载到选择的jquery?

作者:互联网

我在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>
<select id="cb_info" class="cb_bu_info"></select>

数据形成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}]

好吧,它看起来还不错,但是当我运行它时,结果不会显示在选项中,请参阅浏览器开发工具,我没有看到错误.一切都好.这里出现了什么问题?注意:仅使用Chosen Jquery

解决方法:

在查看选择的文档后,似乎没有“源”选项.您需要做的是首先运行您的Ajax调用,然后填写您的选择选项.一旦select全部填充,然后在该select元素上运行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%" });
})

标签:javascript,jquery,html5,select,jquery-chosen
来源: https://codeday.me/bug/20190727/1557480.html