How to dynamically modify <select> in materialize css framework

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.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?



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() {

// 2a) Whenever you do this --> add new option

// 2b) Manually do this --> trigger custom event

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

Demo in jsFiddle & Stack Snippets:

$(function() {

  // initialize

  // setup listener for custom event to re-initialize on change
  $('.materialSelect').on('contentChanged', function() {

  // update function for demo purposes
  $("#myButton").click(function() {
     // add new value
    var newValue = getNewDoggo();
    var $newOpt = $("<option>").attr("value",newValue).text(newValue)

    // fire custom event anytime you've updated select


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="" rel="stylesheet">
<script src="//"></script>
<script src=""></script>

<button class="waves-effect waves-light btn" id="myButton">
  Add New Option to Dropdown

<select id="myDropdown" class="materialSelect">
  <option value="Happy Floof">Happy Floof</option>
  <option value="Derpy Biscuit">Derpy Biscuit</option>


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


Similar to this:

var next_id = $(".mtr-select");
$.each(json, function(key, value) {

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


This is a valid solution for MaterializeCss v0.96.1. In version 0.97.0 it doesn't work: seems that there is a bug that appends a caret in the HTML.

Here the code for v0.97.0:

$(document).ready(function() {

  // Initialize
  $("button").click(function() {
    // Clear the content
    $("select").empty().html(' ');

    // And add a new value
    var value = "New value";

    // Update the content clearing the caret

<link  href="" rel="stylesheet">
<script src="//"></script>
<script src=""></script>

<button class="btn-large blue waves-effect waves-light">Change</button>

<div class="input-field">

      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>



This works for Materialize 1.0.0-rc.1 :

the situation: I have two fields; first is to select a category

<select name="category" id="category">
    <option value="0">Choisissez une Catégorie</option>
    <option value="1">Audios</option>
    <option value="2">Vidéos</option>
    <option value="3">Applications</option>
    <option value="4">Jeux Vidéos</option>

after category is selected, the second select id="subcategory" is populated with good subcats according to the parent category:

<select name="subcategory" id="subcategory" disabled="disabled">
    <option value="0">Choisissez une sous-catégorie</option>

var subCategoriesNames = ['Tout', ['Tout', 'Musiques', 'Concerts', 'Comédies'], ['Tout', 'Films', 'Séries TV', 'Emissions TV', 'Documentaires', 'Animations', 'Animations Séries', 'Concerts', 'Sports'], ['Tout', 'Livres', 'Magazines', 'Presses', 'Mangas', 'BD'], ['Tout', 'Formations', 'Android', 'Windows', 'Linux', 'Web', 'Emulateurs'], ['Tout', 'Android', 'Windows', 'Consoles', 'Linux']],
subCategoriesIds = ['1', ['2', '3', '4', '5'], ['6', '7', '8', '9', '10', '11', '12', '13', '14'], ['15', '16', '17', '18', '19', '20'], ['21', '22', '23', '24', '25', '26', '27'], ['28', '29', '30', '31', '32']],
idx = 0,

    $('#category').on('change', function(){
        idx = this.selectedIndex;
        if(idx > 0){
            $('select#subcategory').attr('disabled', false);
            for(subsName in subCategoriesNames[idx]) $('select#subcategory').append('<option value="'+subCategoriesIds[idx][subsName]+'">'+subCategoriesNames[idx][subsName]+'</option>');
            $('select#subcategory').attr('disabled', true);
        var subcatSelectElem = document.querySelectorAll('#subcategory');
        var subcatSelectInstance = M.FormSelect.init(subcatSelectElem, {});

Hi as you are using materialize framework, using simple generates other container elements for the same. hence using jquery select tag wont do the required task you need

I found this which works fine for me

    <select class="className"></select> 

hope this works for you too


In Materialize v1.0.0, all you have to do is call $('.yourSelect').formSelect(); after removing or adding option elements from your select element.

$('select').material_select(); // for initializing the material select box


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.