Невозможно добавить список опций в множественный выбор jQuery

Question

Я хочу создать список выбора нескольких вариантов, например этот пример плагина.Список опций заполняется с помощью ajax-вызова базы данных.Вызов ajax работает нормально, но список опций не заполняется.Я также следовал этому гиду .Любая помощь высоко ценится.

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

Пожалуйста, примените плагин множественной выборки снова в ajax respose (sucess)

  <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 плагина успешно добавлены на вашу страницу.

Answer 2

Попробуйте изменить

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/

1010 *
*

С уважением,

Brhaka