添加选项以从Jquery中选择HTML不起作用

Question

选项未添加到HTML选择从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>

2. 我的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)); }); 

以上注释行均无效。

Answer 1

您可以以更动态的方式将选项添加到选择中。 如果您使用的是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，而是与处理来自jquery的MDB select追加有关，并且发现正确的方法是：

                //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。
干杯！！！