Question

我想创建多选选项列表，例如this示例插件。使用对数据库的ajax调用来填充选项列表。 ajax调用工作正常，但未填充选项列表。我也遵循了这个guide。任何帮助表示高度赞赏。

HTML

<div class="form-group">
    <label for="langOpt">Select Option</label>
    <select class="form-control" name="langOpt[]" multiple id="langOpt">
    <!--option list-->
    </select>
</div>

即插即用

<script>
$('select[multiple]').multiselect();
</script>

jQuery

<script>
$('#langOpt').click(function () {

      $.ajax({
            type : "GET",
            dataType :'json',
            url : "<?php echo base_url('registration/get_opton_list') ?>",
            success : function(data) {
              $('#langOpt').html('');
              jQuery(data).each(function(i, item){
                $('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");

                //this ensure the ajax call, values print on console
                console.log(item.optionId);
                console.log(item.optionName);
              });

            }

          });
    });
</script>

更新：将插件成功调用ajax会给出错误

Uncaught TypeError: $(...).multiselect is not a function
    at Object.<anonymous> ((index):190)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at Object.success ((index):183)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)
(anonymous) @ (index):190
each @ jquery.min.js:2
each @ jquery.min.js:2
success @ (index):183
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ (index):176
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2

Answer 1

尝试更改

jQuery(data).each(function(i, item){
    $('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
    //this ensure the ajax call, values print on console
    console.log(item.optionId);
    console.log(item.optionName);
});

↓

$.each(data, function (i, item) {
    $('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
    //this ensure the ajax call, values print on console
    console.log(item.optionId);
    console.log(item.optionName);
});

在这里看看：https://www.sitepoint.com/jquery-each-function-examples/

最诚挚的问候，

布拉卡（Brhaka）

Answer 2

请在ajax respose（成功）中再次应用multiselect插件

  <script>
    $('#langOpt').click(function () {

     $.ajax({
        type : "GET",
        dataType :'json',
        url : "<?php echo base_url('registration/get_opton_list') ?>",
        success : function(data) {
          $('#langOpt').html('');
          jQuery(data).each(function(i, item){
            $('#langOpt').append("<option value='"+ item.optionId+"'>" + item.optionName+ "</option>");
            $('#langOpt').multiselect();
            //this ensure the ajax call, values print on console
            console.log(item.optionId);
            console.log(item.optionName);
          });

        }

      });
});

注意：确保插件的CSS和JS已成功添加到页面中。

无法将选项列表添加到多个选择jQuery

2 个答案: