According to the [Docs on Materialize Forms][1]:

> 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][2] 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][3] & 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>



[1]: http://materializecss.com/forms.html
[2]: https://stackoverflow.com/a/2712188/1366033
[3]: https://jsfiddle.net/KyleMit/1gxqhvpa/

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:

   <select id="dropdownid"></select>

Before, this was working. Now it fails. What would be an alternative for repopulating this dropdown dynamically using javascript?


How to dynamically modify <select> in materialize css framework

Yes, it's possible right [out of the box][m1]:

[![enter image description here][1]][2]

Just [initialize the plugin][m2] like this:

    // Initialize collapse button
    $(".button-collapse").sideNav();

### [Demo in Plunker][3]

### Demo in Stack Snippets





    $(".button-collapse").sideNav();



    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.js"></script>

    <nav>
      <ul class="right hide-on-med-and-down">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
      </ul>
      <ul id="slide-out" class="side-nav">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
      </ul>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </nav>



For testing, just enable emulation in the chrome developer tools, reload the page, and swipe in from the edge.




[1]: http://i.stack.imgur.com/7dOGa.gif
[2]: http://i.stack.imgur.com/t8c6q.gif
[3]: http://plnkr.co/edit/ERtNi8yru4DfojXErCsx?p=preview
[m1]: http://materializecss.com/mobile.html
[m2]: http://materializecss.com/side-nav.html#options

I know [Materialize.css][1] has an option to swipe left to dismiss the open sidemenu, but is it possible to open the menu by swiping right as found in most android phones. 

I have a meteor.js implementation for a android app and would want to know if such a feature offered out of the box. 


[1]: http://materializecss.com/