How to dynamically modify <select> in materialize css framework

Question

I just started using the materialize css framework. Now, materialize converts any select tag into a collection of ul and li elements. Before, using JQuery, I was able to do this:

var $selectDropdown = $("#dropdownid"); $selectDropdown.empty(); $selectDropdown.html(' '); var value = "some value"; $selectDropdown .append($("<option></option>").attr("value",value).text(value)); 

My html is just a sample select tag:

Before, this was working. Now it fails. What would be an alternative for repopulating this dropdown dynamically using javascript?

Answer 1

According to the Docs on Materialize Forms:

In addition, you will need a separate call for any dynamically generated select elements your page generates

So the best way is to just re-bind the generated select with an additional call to .material_select().

For re-usability, you can set up a listener when the elements have changed and then trigger that listener whenever you update the original select

// 1) setup listener for custom event to re-initialize on change $('select').on('contentChanged', function() {   $(this).material_select(); });  // 2a) Whenever you do this --> add new option $selectDropdown.append($("<option></option>"));  // 2b) Manually do this --> trigger custom event $selectDropdown.trigger('contentChanged'); 

This has the benefit of only needing to update the particular select element that has changed.

Demo in jsFiddle & Stack Snippets:

$(function() {      // initialize    $('.materialSelect').material_select();      // setup listener for custom event to re-initialize on change    $('.materialSelect').on('contentChanged', function() {      $(this).material_select();    });      // update function for demo purposes    $("#myButton").click(function() {             // add new value      var newValue = getNewDoggo();      var $newOpt = $("<option>").attr("value",newValue).text(newValue)      $("#myDropdown").append($newOpt);        // fire custom event anytime you've updated select      $("#myDropdown").trigger('contentChanged');          });    });    function getNewDoggo() {    var adjs =  ['Floofy','Big','Cute','Cuddly','Lazy'];    var nouns = ['Doggo','Floofer','Pupper','Fluffer', 'Nugget'];    var newOptValue = adjs[Math.floor(Math.random() * adjs.length)] + " " +                       nouns[Math.floor(Math.random() * nouns.length)];    return newOptValue;  }

body { padding: 25px}

<link  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet">  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>    <button class="waves-effect waves-light btn" id="myButton">    Add New Option to Dropdown  </button>    <select id="myDropdown" class="materialSelect">    <option value="Happy Floof">Happy Floof</option>    <option value="Derpy Biscuit">Derpy Biscuit</option>  </select>

Answer 2

You can reinitialize the select element after your data is bound successfully. Like so,

$('select').material_select(); 

Similar to this:

var next_id = $(".mtr-select"); $.each(json, function(key, value) {     $(next_id).append($("<option></option>").attr("value", value.id).text(value.name)); }); $(next_id).material_select(); 

It binds its option values to new ul>li element by creating the dom object on load.