How to correctly load a Materialize 1.0 Select from JQuery?

Question

How to correctly load a Materialize 1.0 Select from JQuery?

Navigation

#1 by (1 votes)

1

When applying the browser-default class the options are loaded correctly, but I can not work with the materialize select loading option from jquery.

<div class="input-field col s6 m4 l4">
    <select  name="prim" id="prim"  class="validate">
      <option value="" disabled selected>-- Select --</option>
       <option value="1">hola</option>
       <option value="2">mundo</option>
    </select>
  <label for="prim">Primero</label>
</div>
<div class="input-field col s6 m4 l4"> 
    <select name="seg" id="seg" class="validate">
    </select>
    <label for="seg">Segundo</label>
  </div>

M.AutoInit ();

$(document).ready(function(){
    $('select').formSelect();
});

$('#prim').change(function()
{ 
    for (i = 0; i < 10; i++)
    { 
        $('#seg').append($('<option>',
        {
            value: i,
            text : "Option "+i 
        }));
    }
    $('#seg').formSelect();
});

materialize

asked by CRUZ VARGAS 14.11.2018 в 04:20

source

1 answer

Modal window with Response.Write How do I visualize the image

score 1 · Accepted Answer

The problem may be in the order you add the libraries . If you add jQuery, the code works first:

$(function() {
  $('select').formSelect();
});

$('#prim').change(function()
{ 
    for (i = 0; i < 10; i++)
    { 
        $('#seg').append($('<option>',
        {
            value: i,
            text : "Option "+i 
        }));
    }
    $('#seg').formSelect();
});

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

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

<div class="input-field col s6 m4 l4">
  <select name="prim" id="prim" class="validate">
    <option value="" disabled selected>-- Select --</option>
    <option value="1">hola</option>
    <option value="2">mundo</option>
  </select>
  <label for="prim">Primero</label>
</div>
<div class="input-field col s6 m4 l4">
  <select name="seg" id="seg" class="validate">
  </select>
  <label for="seg">Segundo</label>
</div>

If you add jQuery later, it does not work:

$(function() {
  $('select').formSelect();
});

$('#prim').change(function()
{ 
    for (i = 0; i < 10; i++)
    { 
        $('#seg').append($('<option>',
        {
            value: i,
            text : "Option "+i 
        }));
    }
    $('#seg').formSelect();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="input-field col s6 m4 l4">
  <select name="prim" id="prim" class="validate">
    <option value="" disabled selected>-- Select --</option>
    <option value="1">hola</option>
    <option value="2">mundo</option>
  </select>
  <label for="prim">Primero</label>
</div>
<div class="input-field col s6 m4 l4">
  <select name="seg" id="seg" class="validate">
  </select>
  <label for="seg">Segundo</label>
</div>