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>