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

【问题标题】：Adding Options To Select In HTML From Jquery Not Working添加选项以从 Jquery 中选择 HTML 不起作用
【发布时间】：2018-08-02 05:28:01
【问题描述】：

选项未添加到从 Jquery 中选择的 Html。请告诉我我哪里错了？
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)); 
});

以上注释行均无效。

【问题讨论】：

data.result 是什么以及您收到什么值？你有没有在document.ready 中调用这个函数来确保所有的 DOM 都准备好了？
在没有.each 循环的情况下运行正常：jsfiddle.net/zephyr_hex/4fnubcdq/1
您的“附加”命令正在运行。但我猜你看不到预期的结果，因为你正在使用 MDB 包装器进行选择，它必须在基础选择更改后更新。查看 MDB 文档中的操作方法。
是的，我正在从行接收数据 ->console.log(field.class_name);但是选项附加不起作用。
@wanjas ：谢谢伙计.....我已经阅读了 MDB 选择文档并让它工作......非常感谢......干杯！！！

标签： javascript jquery html phonegap

【解决方案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>

【讨论】：

非常感谢@Mr。 Brickowski 为您解答......真的很喜欢它......我得到了解决方案，问题来自 mdb-select 类。我在阅读 MDB Select Documentation 后修复了它.....我非常感谢你......干杯！！！

【解决方案2】：

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

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

【讨论】：