javascript - not - Cómo modificar dinámicamente<select> en materialize css framework

menu materialize

Question

Acabo de empezar a usar el marco de materializar css. Ahora, materializar convierte cualquier etiqueta de selección en una colección de elementos ul y li. Antes, usando JQuery, pude hacer esto:

var $selectDropdown = $("#dropdownid");
$selectDropdown.empty();
$selectDropdown.html('' '');
var value = "some value";
$selectDropdown .append($("<option></option>").attr("value",value).text(value));

Mi HTML es solo una muestra de etiqueta de muestra:

Antes, esto estaba funcionando. Ahora falla. ¿Cuál sería una alternativa para repoblar este menú desplegable dinámicamente usando javascript?

Answer 1

De acuerdo con los documentos en formas de materializar :

Además, necesitará una llamada por separado para cualquier elemento de selección generado dinámicamente que su página genere.

Entonces, la mejor manera es simplemente volver a enlazar la selección generada con una llamada adicional a .material_select() .

Para volver a usarlos, puede configurar un escucha cuando los elementos hayan cambiado y luego activar ese escucha cada vez que actualice la selección original.

// 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'');

Esto tiene la ventaja de que solo necesita actualizar el elemento de selección particular que ha cambiado.

Demostración en 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>

Answer 2

Esta es una solución válida para MaterializeCss v0.96.1. En la versión 0.97.0 no funciona: parece que hay un error que agrega un carácter en el HTML.

Aquí el código para v0.97.0:

$(document).ready(function() {

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

    // And add a new value
    var value = "New value";
    $("select").append(
      $("<option></option>").attr("value",value).text(value)
    );

    // Update the content clearing the caret
    $("select").material_select(''update'');
    $("select").closest(''.input-field'').children(''span.caret'').remove();
  });

 
});

<link  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/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.97.0/js/materialize.min.js"></script>

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

<div class="input-field">

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

</div>

Answer 3

Esto funciona para Materialise 1.0.0-rc.1 :

La situación: tengo dos campos; Lo primero es seleccionar una categoría.

<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>
</select>

después de seleccionar la categoría, la segunda id. de selección = "subcategoría" se rellena con buenas subcats de acuerdo con la categoría principal:

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

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,
subsName;

$(document).ready(function(){
    $(''#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>'');
        }else{
            $(''select#subcategory'').attr(''disabled'', true);
        }
        var subcatSelectElem = document.querySelectorAll(''#subcategory'');
        var subcatSelectElem = M.FormSelect.init(subcatSelectElem, {});
    })
});

Answer 4

Puede reinicializar el elemento seleccionado una vez que sus datos se hayan enlazado correctamente. Al igual que,

$(''select'').material_select();

Similar a ésto:

var next_id = $(".mtr-select");
$.each(json, function(key, value) {
    $(next_id).append($("<option></option>").attr("value", value.id).text(value.name));
});
$(next_id).material_select();

Enlaza sus valores de opción al nuevo elemento ul>li creando el objeto dom en carga.

Answer 5

$(document).ready(function() {

  // initialize
  $(''select'').material_select();

  
  $("#myButton").click(function() {
    
    // clear contents
    var $selectDropdown = 
      $("#dropdownid")
        .empty()
        .html('' '');

    // add new value
    var value = "some value";
    $selectDropdown.append(
      $("<option></option>")
        .attr("value",value)
        .text(value)
    );

    // trigger event
    $selectDropdown.trigger(''contentChanged'');
  });


  $(''select'').on(''contentChanged'', function() {
    // re-initialize (update)
    $(this).material_select();
  });
  
});

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

<a class="waves-effect waves-light btn" id="myButton">
  Change Dropdown
</a>

<select id="dropdownid" >
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Answer 6

$(''select'').material_select(); // for initializing the material select box
$("select").closest(''.input-field'').children(''.select-wrapper'').children("span").html("");

Answer 7

$(document).ready(function() {

  // initialize
  $(''select'').material_select();


  $("#myButton").click(function() {

    // clear contents
    var $selectDropdown = 
      $("#dropdownid")
        .empty()
        .html('' '');

    // add new value
    var value = "some value";
    $selectDropdown.append(
      $("<option></option>")
        .attr("value",value)
        .text(value)
    );

    // trigger event
    $selectDropdown.trigger(''contentChanged'');
  });


  $(''select'').on(''contentChanged'', function() {
    // re-initialize (update)
    $(this).material_select();
  });

});



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

  <a class="waves-effect waves-light btn" id="myButton">
  Change Dropdown
  </a>

<select id="dropdownid" >
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>