Search code examples
javascriptjqueryhtmlphonegap

Adding Options To Select In HTML From Jquery Not Working

The Options Are Not Added To Html Select From Jquery. Please Tell Me Where Am I Wrong?
1. My HTML CODE

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

  1. My JQUERY CODE

    $.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 Of The Above Commented Line Worked.

Solution

  • From The Comment Above From @wanjas,
    I read the MDB select documentation and found that problem is not with my jquery but it is with handling MDB select append from jquery and found that correct way to do it is:-

                    //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();

    Once Again Thank You Very Much @wanjas.
    Cheers!!!