Topic: update select dynamically

boyd8811 pro asked 6 years ago


Can you point me to some code that shows how to update a select list dynamically.  Here is what I thought would work.

$(document).ready(function() {
 var countries = @Html.Raw(Json.Serialize(Model.Countries));

$.each(countries, function (index, value) {
 $('#CountryList').append($('<option/>', { 
 value: value,
 text : value.Text
 }));
 });

$('.mdb-select').material_select();
 });

I get the following when I click on the select box

SCRIPT5007: SCRIPT5007: Unable to get property 'jquery' of undefined or null reference popper.min.js (4,12026)

I do not get a drop down.

 


boyd8811 pro commented 6 years ago

Turns out I was loading mdb.min.js before popper.min.js and bootstrap.min.js. Moved mdb.min.js to the bottom and everything works as expected.

Mikołaj Smoleński staff answered 6 years ago


Hi, I've prepared an example for You. I think it might be helpful for Your issue:
 <select class="mdb-select" id="select">
 <option value="" disabled selected>Choose your option</option>
 </select>
 <label>Example label</label>
 $('#select').append(new Option('Option #1', '1', true, false));
 $('#select').append(new Option('Option #2', '2', true, false));
 $('#select').append(new Option('Option #3', '3', true, false));
 $('.mdb-select').material_select();
Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags