How to Dynamically Modify <Select> in Materialize CSS Framework

How to dynamically modify select in materialize css framework

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>

Programmatically select an option - Materialize css

You just need to call the material_select() on it again.

Keep in mind though that the :first you use to select the option targets the <option disabled selected>Choose your option</option> one.

$(function(){

  $('select').material_select();

 

  var select = $('#select_1');

  

  select.find('option:eq(2)').prop('selected', true);

  select.material_select();

 

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">

  <div class="input-field col s12">

    <select id="select_1" name="select_1">

      <option disabled selected>Choose your option</option>

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

      <option>Option 4</option>

      <option>Option 5</option>

      <option>Option 6</option>

    </select>

    <label for="select_1">Select 1</label>

  </div>

</div>

How to refresh/update select in Javascript (vanilla) with Materialize?

Apparently, the solution to my case was to add M.FormSelect.init(selectList); before return. The codes with the update/solution are available in CodePen.

Materialize select not working append option with

 $(document).ready(function() {

    $('select').material_select();

 });

 

 $(document).on('change','#select_1', function(){

     get_selected();         

})

function get_selected(){

     var data=[{id:1,name:"ABC"},{id:2,name:"XYZ"},{id:3,name:"PQR"}];

     

     var Options="";

    $.each(data, function(i, val){ 

      Options=Options+"<option value='"+val.id+"'>"+val.name+"</option>";

  });

  $('#select_2').empty();

  $('#select_2').append(Options);

  $("#select_2").material_select()

} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    

<div class="row">    

<div class="input-field col s12">                            

<select id="select_1" name="select_1">

<option value="1">option 1</option>

<option value="2">option 2Barat</option>     

</select>

<label for="select_1">Select 1</label>

</div>

                    

<div class="input-field col s12">                          

<select id="select_2"  name="select_2">

<option value="0" disabled="disabled">Choose option</option>

</select>

<label for="select_2">Select 2</label>

</div>

</div>

Multiple select in materialize-css with angular2 not rendering dynamic values

This is solved now with the latest version of angular2-materialize. See bug and fix details here: https://github.com/InfomediaLtd/angular2-materialize/issues/21

This is how you can trigger updates to select option elements (using materializeSelectOptions):

<select materialize="material_select" [materializeSelectOptions]="selectOptions">

  <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>

</select>

Materialize CSS - Select Doesn't Seem to Render

Because they override the browser default, the select styling needs Javascript to run. You need to include the Materialize Javascript file, and then call

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

after you've loaded that file.

---

Related Topics