我刚开始使用materialize css框架。现在，materialize将任何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只是一个示例选择标记：
之前，这是有效的。现在它失败了。使用javascript动态重新填充此下拉列表的替代方法是什么？
答案 0 :(得分：47)
此外，您需要单独调用您的页面生成的动态生成的选择元素
因此，最好的方法是通过对.material_select()的额外调用重新绑定生成的选择。
为了重新使用，您可以设置listener when the elements have changed，然后在更新原始选择时触发该侦听器
// 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>
答案 1 :(得分：9)
成功绑定数据后，您可以重新初始化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元素。
答案 2 :(得分：6)
这是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(
$("<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>
答案 3 :(得分：2)
适用于 Materialise 1.0.0-rc.1 ：
情况： 我有两个领域; 首先是选择一个类别
double在选择类别后，第二个选择id =“subcategory”将根据父类别填充好的子类：
<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>
答案 4 :(得分：2)
您好，当您使用实体化框架时，使用simple会为其生成其他容器元素。 因此使用jquery select标签将无法完成您需要的任务
我发现这对我来说很好
<select class="className"></select>
**$('.className').formSelect().append($('<option>'+data[i]+'</option>'))**
希望这对您也有用
答案 5 :(得分：1)
在Materialize v1.0.0中，您要做的就是从$('.yourSelect').formSelect();元素中删除或添加option个元素后调用select。
答案 6 :(得分：0)
$('select').material_select(); // for initializing the material select box
$("select").closest('.input-field').children('.select-wrapper').children("span").html("");
答案 7 :(得分：0)
$(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 :(得分：0)
$(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>