[英]How to dynamically modify <select> in materialize css framework
我刚开始使用 materialize css 框架。 现在,materialize 将任何选择标记转换为 ul 和 li 元素的集合。 之前,使用 JQuery,我能够做到这一点:
var $selectDropdown = $("#dropdownid");
$selectDropdown.empty();
$selectDropdown.html(' ');
var value = "some value";
$selectDropdown .append($("<option></option>").attr("value",value).text(value));
我的 html 只是一个示例选择标签:
以前,这是有效的。 现在它失败了。 使用 javascript 动态重新填充此下拉列表的替代方法是什么?
此外,您将需要对页面生成的任何动态生成的选择元素进行单独调用
所以最好的方法是通过额外调用.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');
这样做的好处是只需更新已更改的特定选择元素。
$(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>
您可以在数据绑定成功后重新初始化 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();
它通过在加载时创建 dom 对象将其选项值绑定到新的ul>li
元素。
这是 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>
这适用于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="subcategory" 根据父类别填充好子猫:
<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 subcatSelectInstance = M.FormSelect.init(subcatSelectElem, {});
})
});
嗨,因为您使用的是 materialize 框架,所以使用 simple 生成相同的其他容器元素。 因此使用 jquery select 标签不会做你需要的任务
我发现这对我来说很好用
<select class="className"></select>
**$('.className').formSelect().append($('<option>'+data[i]+'</option>'))**
希望这对你也有用
在 Materialise v1.0.0 中,您所要做的就是调用$('.yourSelect').formSelect();
从您的select
元素中删除或添加option
元素后。
$('select').material_select(); // for initializing the material select box
$("select").closest('.input-field').children('.select-wrapper').children("span").html("");
$(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>
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.