Question

66

How to dynamically modify < select> in materialize css framework

rated 0 times [ 71] [ 5] / answers: 1 / hits: 72148 / 9 Years ago, wed, march 18, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

freddiejarretk

Add To Favorites

Follow

Total Points: 612

Total Questions: 103

Total Answers: 88

Location: Armenia

Member since Sat, Dec 31, 2022

1 Year ago

answered 9 Years ago tobyl · Accepted Answer

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>