How to dynamically modify <select> in materialize css framework How to dynamically modify <select> in materialize css framework javascript javascript

How to dynamically modify <select> in materialize css framework


javascript jquery css materialize

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