Как динамически изменять <select> в материализованной css-структуре
Я только начал использовать материализую css framework. Теперь материализуем преобразование любого тега select в коллекцию элементов ul и li. Раньше, используя JQuery, я мог это сделать:
var $selectDropdown = $("#dropdownid");
$selectDropdown.empty();
$selectDropdown.html(' ');
var value = "some value";
$selectDropdown .append($("<option></option>").attr("value",value).text(value));
Мой html - это только тег select select:
Раньше это работало. Теперь он терпит неудачу. Что было бы альтернативой для динамического обновления этого раскрывающегося списка с помощью javascript?
Ответы
Ответ 1
Согласно Документам о материализации форм:
Кроме того, вам потребуется отдельный вызов для любых динамически генерируемых элементов select, которые генерирует ваша страница.
Таким образом, лучший способ - просто повторно связать сгенерированный выбор с дополнительным вызовом .material_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');
Преимущество этого состоит в том, что требуется только обновить конкретный элемент select, который изменился.
$(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>
Ответ 2
Вы можете повторно инициализировать элемент select после успешного соединения данных. Таким образом,
$('select').material_select();
Аналогично этому:
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();
Он связывает свои значения параметров с новым элементом ul>li, создавая объект dom при загрузке.
Ответ 3
Это допустимое решение для MaterializeCss v0.96.1. В версии 0.97.0 он не работает: кажется, что есть ошибка, добавляющая каретку в HTML.
Здесь код для 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>
Ответ 4
Это работает для Materialise 1.0.0-rc.1:
ситуация: у меня есть два поля; во-первых, выбрать категорию
<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>
после выбора категории второй идентификатор id = "подкатегория" заполняется хорошими подкадрами в соответствии с родительской категорией:
<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, {});
})
});
Ответ 5
Привет, как вы используете материализовать рамки, с помощью простого генерирует другие элементы контейнера для того же. следовательно, использование тега выбора jquery не выполнит необходимую задачу
Я нашел это, который прекрасно работает для меня
<select class="className"></select>
**$('.className').formSelect().append($('<option>'+data[i]+'</option>'))**
надеюсь, что это работает и для вас
Ответ 6
$('select').material_select(); // for initializing the material select box
$("select").closest('.input-field').children('.select-wrapper').children("span").html("");
Ответ 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>
Ответ 8
$(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>
Ответ 9
В Materialise v1.0.0 все, что вам нужно сделать, это вызвать $('.yourSelect').formSelect(); после удаления или добавления элементов option из вашего элемента select.
