添加选项到 Select In HTML From Jquery 不工作

Question

选项未添加到 Html Select 来自 Jquery。请告诉我哪里错了？
1. 我的 HTML 密码

<div id="kkr">
  <select id="studenttags" class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here.." required>
    <option value="0" disabled selected>Tag Classes / Sections</option>
    <!-- <option value="1" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">Section-Mountain</option>
    <option value="2" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">Section-River</option>
    <option value="3" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">Section-Forest</option>
    <option value="4" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">Section-Idiots</option>
    <option value="5" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">Section-Goods</option> -->
  </select>
</div>

我的JQUERY代码

$.each(data.result, function(i, field)
{
 console.log(field.class_name);
 // $('#studenttags').append('<option value="'+field.id+'">'+field.class_name+field.class_nick_name+'['+field.enrolled_year+']'+'</option>');
 // $('#studenttags').append("<option>BMW</option>");
 // $('#studenttags').append($('<option>', {value:1, text:'One'}));
 // $("#studenttags").append('<option value="option6">option6</option>');
 // $('#studenttags').append($("<option></option>").attr("value",i).text(field.class_name)); 
});

None 以上注释行有效。

Answer 1

您可以以更动态的方式将选项添加到 select。如果您使用 jQuery，您可以让它为您处理 html 语法。

// Mocking your data object. We dontknow your object structure

var data = {
  result: [{
    class_name: 'some-class-name',
    id: 1,
    class_nick_name: 'some-nick-name',
    enrolled_year: 2018
  }]
};



$.each(data.result, function(i, field) {
  console.log(field.class_name);
  var newOption = $('<option>', {
    value: field.id
  });

  newOption.html(field.class_name + field.class_nick_name + '[' + field.enrolled_year + ']');

  newOption.appendTo('#studenttags');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="kkr">
  <select id="studenttags" class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here.." required>
    <option value="0" disabled selected>Tag Classes / Sections</option>

  </select>
</div>

Answer 2

来自@wanjas 的上述评论，
我阅读了 MDB select 文档，发现问题不在我的 jquery 上，而是在处理 MDB select 从 jquery 追加，发现正确的方法是：-

                //Step-1: Destroy MDB Select
                //Step-2: Add all Options
                //Step-3: Initialize MDB Select
                $('.mdb-select').material_select('destroy');
                $.each(data.result, function(i, field){
                $('#studenttags').append('<option value="'+field.id+'">'+field.class_name+"-"+field.class_nick_name+'['+field.enrolled_year+' Intake]'+'</option>');
                });
                $('.mdb-select').material_select();

再次非常感谢@wanjas。
干杯！！！

添加选项到 Select In HTML From Jquery 不工作

Adding Options To Select In HTML From Jquery Not Working

html

javascript

jquery

phonegap