【发布时间】：2020-09-10 16:45:54
【问题描述】：
我正在尝试对 Materialise 框架使用动态选择，但我无法获得预期的结果。
页面加载后，如果您更改第一个选择（固定的选择），我们将无法在动态选择上选择所有选项。我做了一个简单的例子来说明这个问题：
没有实现
//ready function -------------------------
$( document ).ready(function() {
startDinamicSelect();
});
// Creating the function to add on listener
function startDinamicSelect() {
// Numbers array
var numbersList = {
1 : ['1','3','5','7'],
2 : ['2','4','6','8'],
3 : ['1','2','3','4','5','6','7','8'],
}
// Adding function to onChange event
document.querySelector('#fixedSelect').addEventListener("change", function(){
// Get values of the object
var items = numbersList[this.value];
// Cleaning select
var selectDinamico = document.querySelector('#dinamicSelect');
selectDinamico.innerHTML = '';
// Addinng the items as selected on the first select
items.forEach(function(item){
var option = document.createElement("option");
option.value = item;
option.text = item;
selectDinamico.appendChild(option);
});
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="margin-left: 20px;margin-right: 20px;margin-top: 10px;">
<html>
Type:
<select name="fixedSelect" id="fixedSelect">
<option value="" selected></option>
<option value="1" >Odd numbers</option>
<option value="2" >Pair numbers</option>
<option value="3" >Both</option>
</select>
<hr>
Number:
<select name="dinamicSelect" id="dinamicSelect"></select>
</html>
</body>添加 Materialize 框架后，动态选择无法正常工作。只显示第一个选项，无法更改选择
使用 Materialise
//ready function -------------------------
$( document ).ready(function() {
startDinamicSelect();
$('select').formSelect();
});
// Creating the function to add on listener
function startDinamicSelect() {
// Numbers array
var numbersList = {
1 : ['1','3','5','7'],
2 : ['2','4','6','8'],
3 : ['1','2','3','4','5','6','7','8'],
}
// Adding function to onChange event
document.querySelector('#fixedSelect').addEventListener("change", function(){
// Get values of the object
var items = numbersList[this.value];
// Cleaning select
var selectDinamico = document.querySelector('#dinamicSelect');
selectDinamico.innerHTML = '';
// Addinng the items as selected on the first select
items.forEach(function(item){
var option = document.createElement("option");
option.value = item;
option.text = item;
selectDinamico.appendChild(option);
});
$('select').formSelect('destroy');
});
}<!-- Compiled and minified CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<body style="margin-left: 20px;margin-right: 20px;margin-top: 10px;">
<html>
Type:
<select name="fixedSelect" id="fixedSelect">
<option value="" selected></option>
<option value="1" >Odd numbers</option>
<option value="2" >Pair numbers</option>
<option value="3" >Both</option>
</select>
<hr>
Number:
<select name="dinamicSelect" id="dinamicSelect"></select>
</html>
</body>我尝试使用没有结果
$('select').material_select('destroy');
$('select').formSelect('destroy');
有人能说出什么是错的吗？代码不能正常工作的问题在哪里？
【问题讨论】：
标签： javascript select materialize