質問する
70841 次
7 に答える
50
さらに、ページが生成する動的に生成された選択要素を個別に呼び出す必要があります。
したがって、最良の方法は、生成された選択を への追加の呼び出しで再バインドすること.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');
これには、変更された特定の選択要素のみを更新する必要があるという利点があります。
jsFiddleおよび Stack スニペットでのデモ:
$(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>
于 2015-04-07T14:50:57.170 に答える
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();
ul>li
ロード時に dom オブジェクトを作成することにより、オプション値を新しい要素にバインドします。
于 2015-04-07T13:53:01.623 に答える
0
$('select').material_select(); // for initializing the material select box
$("select").closest('.input-field').children('.select-wrapper').children("span").html("");
于 2016-06-02T08:06:03.080 に答える