物化选择-动态添加选项时不起作用
[英]Materialize Select - doesn't work when dynamically adding option
问题描述
The second select tag doesn't not work when adding options elements dynamically. 
动态添加选项元素时，第二个select标签不起作用。 I know that I've to initialize material select for dynamic content but don't know how to do it. 我知道我必须为动态内容初始化材料选择，但不知道该怎么做。 I have attached my Java Script and Html tags for reference. 我已附加Java Script和Html标记以供参考。
< script > $(document).ready(function() { $('select').material_select(); }); < /script> <script type="text/javascript"> function populate(s1,s2){ var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if(s1.value == "Arsenal"){ var optionArray = ["Mikel|John Obi Mikel"]; } for(var option in optionArray){ var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } } </script >
<div class="input-field col s12"> <select id="slct1" name="slct1" onChange="populate('slct1','slct2')"> <option value="">Choose team</option> <option value="1">Arsenal</option> <option value="2">Chelsea</option> <option value="3">Manchester United</option> </select> </div> <div class="input-field col s12"> <select id="slct2" name="slct2"> </select> </div>
2 个解决方案
解决方案1
0 2016-04-16 10:02:41
If you are using jQuery, you should not use pure Javascript's document.getElementById , document.createElement , innerHTML and etc... 如果您使用的是jQuery，则不应使用纯Javascript的document.getElementById ， document.createElement ， innerHTML等。
Look at this complete sample: 看这个完整的样本：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#teams').change(function() {
var
selectedValue = $('#teams').val(),
dataSource,
i;
if (selectedValue === '1') {
dataSource = ['Mikel', 'Obi', 'Mikel'];
}
else if (selectedValue === '2') {
dataSource = ['Test 1', 'Test 2', 'Test 3'];
}
$('#players').html('');
for (i in dataSource) {
$('#players').append('<option>' + dataSource[i] +'</option>');
}
});
});
</script>
</head>
<body>
<div>
<select id="teams">
<option value="">Choose team</option>
<option value="1">Arsenal</option>
<option value="2">Chelsea</option>
<option value="3">Manchester United</option>
</select>
</div>
<div>
<select id="players">
</select>
</div>
</body>
</html>
Result: https://jsfiddle.net/logual/kk6dag8j/ 结果： https : //jsfiddle.net/logual/kk6dag8j/
Updated HTML code with "Materialize" imports: 更新了带有“材料化”导入的HTML代码：
<!DOCTYPE html>
<html>
<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#teams').change(function() {
var
selectedValue = $('#teams').val(),
dataSource,
i;
if (selectedValue === '1') {
dataSource = ['Mikel', 'Obi', 'Mikel'];
}
else if (selectedValue === '2') {
dataSource = ['Test 1', 'Test 2', 'Test 3'];
}
$('#players').html('');
for (i in dataSource) {
$('#players').append('<option>' + dataSource[i] +'</option>');
}
});
});
</script>
</head>
<body>
<div>
<div class="input-field">
<select style="display: block; width: 200px;" id="teams">
<option value="" disabled selected>Choose team</option>
<option value="1">Arsenal</option>
<option value="2">Chelsea</option>
<option value="3">Manchester United</option>
</select>
</div>
<div class="input-field">
<select style="display: block; width: 200px;" id="players">
</select>
</div>
</div>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
解决方案2
0 2016-04-17 16:17:47
< script > $(document).ready(function() { $('select').material_select(); $('#slct1').change(function() { if ($('#slct1').val() == "1") { var a = " <select id='second_menu' >" <? php while ($row1 = mysqli_fetch_array($query_run1, MYSQLI_ASSOC)): ?> +"<option value='<?php echo $row1[" player_id "];?>'><?php echo $row1[" player_name "]; ?></option>" <? php endwhile; ?> +"</select>"; } else if ($('#slct1').val() == "2") { var a = " <select id='second_menu' >" <? php while ($row1 = mysqli_fetch_array($query_run2, MYSQLI_ASSOC)): ?> +"<option value='<?php echo $row1[" player_id "];?>'><?php echo $row1[" player_name "]; ?></option>" <? php endwhile; ?> +"</select>"; } else if ($('#slct1').val() == "3") { var a = " <select id='second_menu' >" <? php while ($row1 = mysqli_fetch_array($query_run3, MYSQLI_ASSOC)): ?> +"<option value='<?php echo $row1[" player_id "];?>'><?php echo $row1[" player_name "]; ?></option>" <? php endwhile; ?> +"</select>"; } $("#set_options").html(a); $('#second_menu').material_select(); }) });
<div class="input-field col s12"> <select id="slct1" name="slct1"> <option value="">Choose team</option> <option value="1">Arsenal</option> <option value="2">Chelsea</option> <option value="3">Manchester United</option> </select> </div> <div id="set_options"></div>
I found a solution myself by initializing the material select when adding dynamic option to it. 我自己通过在添加动态选项时初始化材料选择来找到解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
物化选择列表下拉滚动条在IE上无法正常工作 - Materialize select list dropdown scrollbar doesn't work properly on IE
动态调用模态时，模态设置不起作用[实现] - Modal settings don't work when dynamically calling modals [materialize]
当我清除选项时，选择onChange不再起作用 - When I clear option select onChange doesn't work again
jQuery设置选择选择选项； 不适用于动态添加的选项，但适用于静态选项 - jquery set selected select option; doesn't work for dynamically added option but does for static ones
动态将类添加到控件时，Click事件不起作用 - Click event doesn't work on when dynamically adding classes to controls
物化下拉菜单不起作用 - Materialize dropdown doesn't work
使用 jquery 从动态添加时，select2 不起作用 - select2 doesn't work when add from dynamically with jquery
悬停不适用于选择选项 - Hover doesn't work on select option
jQuery选择选项最后一个不起作用 - jQuery select option last doesn't work
动态添加 <webview> 不起作用 - Dynamically adding a <webview> doesn't work
相关标签