CODEWITHSUNDEEP
javascriptjqueryhtmlphonegap
Samit
Samit

Reputation: 35

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.

Upvotes: 1

Views: 1137

Answers (2)

Samit
Samit

Reputation: 35

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

Upvotes: 1

Mr. Brickowski
Mr. Brickowski

Reputation: 1181

You can add the option to the select in a more dynamic way. If you are using jQuery, you can let it handle the html syntax for you.

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

Upvotes: 1

Related Questions