如何使用 Materialise 在 Javascript(原版)中 refresh/update select?
How to refresh/update select in Javascript (vanilla) with Materialize?
我正在尝试通过使用 Javascript(原版)和 Materialize 来更新 select 小部件中的选项。我猜它与 "dynamically generated select elements" 有关,但我不确定该怎么做?
根据Materialize我可能需要考虑实施:"In addition, you will need a separate call for any dynamically generated select elements your page generates."。不幸的是,我不确定(没有找到)我如何 "dynamically generated select elements" as to update/refresh the select-widget?
这是我的相关代码:
HTML
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class = "container">
<div class="row">
<div class="input-field col s3">
<button id = "btn" class="waves-effect waves-light btn-small"><i class="material-icons left">person_add</i>Add</button>
</div>
<div class="row">
<div class="input-field col s3">
<button id = "btnRemove" class="waves-effect waves-light btn-small"><i class="material-icons left">delete</i>Remove</button>
</div>
</div> <!-- CLOSE ROW -->
<div class="row">
<div>
<div style = "position:relative; top:-10px;" class="input-field col s6">
<select id="voteNoList" onchange="PersonInfo()" required>
<option value="">Vote Number?</option>
<!-- <?!= currListNo; ?>
-->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div> <!-- CLOSE ROW -->
</div> <!-- CLOSE CONTAINER -->
Javascript(原版)
//------------
// AUTO
//------------
// Select
document.addEventListener('DOMContentLoaded', function() {
var el = document.querySelectorAll('select');
var instances = M.FormSelect.init(el);
});
// Button - Add
document.getElementById("btn").addEventListener("click", PersonInfo);
// Button - Remove
document.getElementById("btnRemove").addEventListener("click", PersonDelete);
function PersonInfo(){
debugger;
var selectobject = document.createElement("option");
selectobject.text = "Text55";
selectobject.value = "myvalue55";
var selectList = document.getElementById("voteNoList");
selectList.appendChild(selectobject);
debugger;
return;
}
function PersonDelete(){
debugger;
var selectobject=document.getElementById("voteNoList");
for (var i=0; i<selectobject.length; i++){
if (selectobject.options[i].value == "2"){
selectobject.remove(i);
break;
}
}
debugger;
return;
}
我的期望是有一个 select-widget,它可以根据按钮的按下方式增加和减少选项。 (请注意,为简单起见,我硬编码为只能添加相同的选项并删除等于 "2"
的选项。)
虽然我无法在 Javascript(原版)中找到解决方案,但我能够找到一个 jQuery 解决方案,如
.
我的代码也可以在 CodePen 中找到,在调试模式下可以看到按下按钮时 selectList
的不同数字选项会发生变化。
显然,我的情况的解决方案是在 return
之前添加 M.FormSelect.init(selectList);
。带有 update/solution 的代码在 CodePen 中可用。
我正在尝试通过使用 Javascript(原版)和 Materialize 来更新 select 小部件中的选项。我猜它与 "dynamically generated select elements" 有关,但我不确定该怎么做?
根据Materialize我可能需要考虑实施:"In addition, you will need a separate call for any dynamically generated select elements your page generates."。不幸的是,我不确定(没有找到)我如何 "dynamically generated select elements" as to update/refresh the select-widget?
这是我的相关代码:
HTML
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class = "container">
<div class="row">
<div class="input-field col s3">
<button id = "btn" class="waves-effect waves-light btn-small"><i class="material-icons left">person_add</i>Add</button>
</div>
<div class="row">
<div class="input-field col s3">
<button id = "btnRemove" class="waves-effect waves-light btn-small"><i class="material-icons left">delete</i>Remove</button>
</div>
</div> <!-- CLOSE ROW -->
<div class="row">
<div>
<div style = "position:relative; top:-10px;" class="input-field col s6">
<select id="voteNoList" onchange="PersonInfo()" required>
<option value="">Vote Number?</option>
<!-- <?!= currListNo; ?>
-->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div> <!-- CLOSE ROW -->
</div> <!-- CLOSE CONTAINER -->
Javascript(原版)
//------------
// AUTO
//------------
// Select
document.addEventListener('DOMContentLoaded', function() {
var el = document.querySelectorAll('select');
var instances = M.FormSelect.init(el);
});
// Button - Add
document.getElementById("btn").addEventListener("click", PersonInfo);
// Button - Remove
document.getElementById("btnRemove").addEventListener("click", PersonDelete);
function PersonInfo(){
debugger;
var selectobject = document.createElement("option");
selectobject.text = "Text55";
selectobject.value = "myvalue55";
var selectList = document.getElementById("voteNoList");
selectList.appendChild(selectobject);
debugger;
return;
}
function PersonDelete(){
debugger;
var selectobject=document.getElementById("voteNoList");
for (var i=0; i<selectobject.length; i++){
if (selectobject.options[i].value == "2"){
selectobject.remove(i);
break;
}
}
debugger;
return;
}
我的期望是有一个 select-widget,它可以根据按钮的按下方式增加和减少选项。 (请注意,为简单起见,我硬编码为只能添加相同的选项并删除等于 "2"
的选项。)
虽然我无法在 Javascript(原版)中找到解决方案,但我能够找到一个 jQuery 解决方案,如
我的代码也可以在 CodePen 中找到,在调试模式下可以看到按下按钮时 selectList
的不同数字选项会发生变化。
显然,我的情况的解决方案是在 return
之前添加 M.FormSelect.init(selectList);
。带有 update/solution 的代码在 CodePen 中可用。