如何在materialize css框架中动态修改

我刚开始使用materialize css框架。 现在，materialize将任何select标签转换为ul和li元素的集合。 之前，使用JQuery，我能够做到这一点：

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

我的html只是一个示例选择标记：

以前，这是有效的。 现在它失败了。 使用javascript动态重新填充此下拉列表的替代方法是什么？

Answer 1

根据物化forms文件 ：

此外，您需要单独调用页面生成的任何动态生成的选择元素

因此，最好的方法是通过对.material_select()的额外调用重新绑定生成的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($("")); // 2b) Manually do this --> trigger custom event $selectDropdown.trigger('contentChanged'); 

这样做的好处是只需要更新已更改的特定select元素。

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 = $("").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} 

     Add New Option to Dropdown   Happy Floof Derpy Biscuit  

Answer 2

成功绑定数据后，可以重新初始化select元素。 像这样，

 $('select').material_select(); 

与此类似：

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

它通过在加载时创建dom对象将其选项值绑定到新的ul>li元素。

Answer 3

这是MaterialiseCss 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( $("").attr("value",value).text(value) ); // Update the content clearing the caret $("select").material_select('update'); $("select").closest('.input-field').children('span.caret').remove(); }); }); 

    Change 
  Option 1 Option 2 Option 3   

Answer 4

这适用于Materialise 1.0.0-rc.1 ：

情况：我有两个领域; 首先是选择一个类别

  Choisissez une Catégorie Audios Vidéos Applications Jeux Vidéos  

选择类别后，第二个选择id =“subcategory”将根据父类别填充好的子类：

  Choisissez une sous-catégorie  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(''+subCategoriesNames[idx][subsName]+''); }else{ $('select#subcategory').attr('disabled', true); } var subcatSelectElem = document.querySelectorAll('#subcategory'); var subcatSelectElem = M.FormSelect.init(subcatSelectElem, {}); }) }); 

Answer 5

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

Answer 6

 $(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( $("") .attr("value",value) .text(value) ); // trigger event $selectDropdown.trigger('contentChanged'); }); $('select').on('contentChanged', function() { // re-initialize (update) $(this).material_select(); }); }); 

     Change Dropdown   Option 1 Option 2 Option 3  

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( $("") .attr("value",value) .text(value) ); // trigger event $selectDropdown.trigger('contentChanged'); }); $('select').on('contentChanged', function() { // re-initialize (update) $(this).material_select(); }); });     Change Dropdown   Option 1 Option 2 Option 3