时间戳

首页 > 解决方案 > Cannot Add Option List to Multiple Select jQuery

javascript - Cannot Add Option List to Multiple Select jQuery

问题描述

I want to create multi select option list like this example plugin. The option list is populated using ajax call to the database. The ajax call works fine but the option list is not being populated. I also followed this guide. Any help highly appreciated.

HTML

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

Plugin Call

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

UPDATE: Calling plugin into ajax success gives an error

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

标签： javascriptjqueryhtmlajax

解决方案

尝试改变

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

↓</p> 

$.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/


此致，

布拉卡

推荐阅读