Javascript 只要我想清除,下拉菜单就会复制选项
我正在尝试编写一个函数来更新对象中的值。 每当我这样做时,我想清除下拉菜单,用现在更新的值重新填充它,并显示新更新的对象。 除了将更新后的值复制到我的下拉菜单中,而不是清除并重新填充它之外,这种方法是有效的 阵列:Javascript 只要我想清除,下拉菜单就会复制选项,javascript,Javascript,我正在尝试编写一个函数来更新对象中的值。 每当我这样做时,我想清除下拉菜单,用现在更新的值重新填充它,并显示新更新的对象。 除了将更新后的值复制到我的下拉菜单中,而不是清除并重新填充它之外,这种方法是有效的 阵列: var GeefSchermInfo = () => { let schermInfo = [{ "Scherm": "Lobby", "Berichten": [{ "Titel": "Welkom in onze school
var GeefSchermInfo = () => {
let schermInfo = [{
"Scherm": "Lobby",
"Berichten": [{
"Titel": "Welkom in onze school",
"Tekst": "Het is hier dolle kookpret",
"Duur": 5,
"Image": "",
"Tabel": []
},
{
"Titel": "Lokaalverdeling",
"Tekst": "",
"Duur": 5,
"Image": "",
"Tabel":
}
]
},
{
"Scherm": "Speelplaats",
"Berichten": [{
"Titel": "Welkom in onze school",
"Tekst": "Het is hier dolle kookpret",
"Duur": 5,
"Image": "https://www.feestkleding.nl/media/catalog/product/fk/k/o/kok-hoed-a.jpg",
"Lokalen": []
},
{
"Titel": "Maaltijden",
"Tekst": "",
"Duur": 5,
"Image": "",
}
]
}
]
return schermInfo;
}
为了更好地理解,我制作了Variabeles:
var info = GeefSchermInfo();
我的职能:
这将使用阵列中每个对象的名称填充第一个下拉菜单
//Vullen Selectiebox voor schermen
function ToonScherm(){
for(var i = 0; i < info.length; i++) {
var opt = info[i].Scherm;
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
//Doorgeven welk scherm er bedoeld wordt.
if (document.getElementById("crud")){
SchermNummerVullen(opt);
}
}
}
谢尔曼
数字标牌
找到了答案
我删除了函数HervullenSelectieBoxen()中的代码
替换为
//Hervullen van de selectieboxen
function HervullenSelectieBoxen(){
slcSchermNummer.options.length = 0;
select.options.length = 0;
ToonScherm();
SchermNummerVullen();
ToonInfo();
}
但不确定前面的代码有什么问题://请单击编辑,然后单击[]
代码段编辑器,并生成一个对象,因为对象中没有变量,所以只需将其定义为常量信息=[{“Scherm”:“lobb”,..
我在其中放了一个代码段,但它无法识别对象。错误的窗格。您有3个,左上角是HTML(您没有放任何)。右上角是CSS,左下角是JavaScript。再次编辑它,向下滚动并单击“编辑上面的代码段”并添加相关的HTMLYeah,@mplungjan我正在编辑它。因为他无法识别该对象,它通常位于另一个js文件中。因此该代码片段并未真正显示我的问题/我的函数。
//Pretty print van het gevraagde scherm
function ToonInfo(){
var schermnummer;
schermnummer = (slcSchermNummer.value)-1;
for (var i=0; i<info.length; i++){
if (info[i].Scherm == select.value){
SchermenInfo.innerHTML = '"Scherm": "'+info[i].Scherm+'",\n';
SchermenInfo.innerHTML += JSON.stringify(info[i].Berichten[schermnummer], null, 4);
TextboxenVullen(i,schermnummer);
}
}
}
var GeefSchermInfo = () => {
let schermInfo =
[
{
"Scherm": "Lobby",
"Berichten":
[
{
"Titel": "Welkom in onze school",
"Tekst": "Het is hier dolle kookpret",
"Duur": 5,
"Image": "",
"Tabel": []
},
{
"Titel": "Lokaalverdeling",
"Tekst": "",
"Duur": 5,
"Image": "",
"Tabel":
[
{ "Titelrij": ["1", "2", "3", "4", "5", "6", "7", "8"] },
{ "1AA": ["SP 0.22", "SP 0.22", "SP 0.22", "SP 0.22", "", "LO", "Praktijk", "Praktijk"] },
{ "1AB": ["SP 0.23", "SP 0.23", "SP 0.23", "SP 0.23", "", "LO", "Praktijk", "Praktijk"] },
{ "2AA": ["LO", "SP 1.22", "SP 1.22", "SP 1.22", "", "SP0.24", "WET", "MAVO"] }
]
}
]
},
{
"Scherm": "Speelplaats",
"Berichten":
[
{
"Titel": "Welkom in onze school",
"Tekst": "Het is hier dolle kookpret",
"Duur": 5,
"Image": "https://www.feestkleding.nl/media/catalog/product/fk/k/o/kok-hoed-a.jpg",
"Lokalen": []
},
{
"Titel": "Maaltijden",
"Tekst": "",
"Duur": 5,
"Image": "",
"Tabel":
[
{ "Titelrij": ["Bistro", "Verzorgde dienst"] },
{ "1": ["2AB", "1AA 1-8"] },
{ "2": ["1AA 9-13", "2AA"] },
{ "3": ["1AT 1 -7", "1AB"] }
]
}
]
}
]
return schermInfo;
}
var info = GeefSchermInfo();
function ToonScherm(){
for(var i = 0; i < info.length; i++) {
var opt = info[i].Scherm;
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
//Doorgeven welk scherm er bedoeld wordt.
if (document.getElementById("crud")){
SchermNummerVullen(opt);
}
}
}
function SchermNummerVullen(selectedScherm){
for (var i = 0; i < info.length; i++){
if(info[i].Scherm == selectedScherm){
var el = document.createElement("option");
el.textContent = i+1;
el.value = i+1;
slcSchermNummer.appendChild(el);
}
}
}
function ToonInfo(){
var schermnummer;
schermnummer = (slcSchermNummer.value)-1;
for (var i=0; i<info.length; i++){
if (info[i].Scherm == select.value){
SchermenInfo.innerHTML = '"Scherm": "'+info[i].Scherm+'",\n';
SchermenInfo.innerHTML += JSON.stringify(info[i].Berichten[schermnummer], null, 4);
TextboxenVullen(i,schermnummer);
}
}
}
function HervullenSelectieBoxen(){
for (var i = 0; i <= select.options.length; i++)
{
select.remove(i-1);
}
for (var i=0; i <= slcSchermNummer.options.length; i++)
{
slcSchermNummer.remove(i-1);
}
ToonScherm();
SchermNummerVullen();
ToonInfo();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/style.css" />
<script src="../js/data.js"></script>
<script src="../js/script.js"></script>
<title>Schermen</title>
</head>
<body id="crud">
<div class="grid-container">
<!-- Rechterkant -->
<div class="item">
<h1>Digital signage</h1>
<button id="btnHome" onclick="location.href='../index.html'">Aanpassing bekijken</button>
<div id="divOpties">
<h2>Opties</h2>
<label for="slcScherm">Scherm:</label><br />
<select id="slcScherm"></select>
<select id="slcSchermNummer"></select>
<br/><br/>
<label for="txtScherm">Scherm:</label>
<input id="txtScherm" type="text" /><br />
<label for="txtTitel">Titel:</label>
<input id="txtTitel" type="text" /><br />
<label for="txtTekst">Tekst:</label>
<input id="txtTekst" type="text" /><br />
<label for="txtDuur">Duur:</label>
<input id="txtDuur" type="number" /><br />
<label for="txtImage">Imagepad: </label>
<input id="txtImage" type="text" /><br />
<button id="btnBevestig">Bevestig aanpassingen</button>
</div>
</div>
<!-- Linkerkant -->
<div class="item" id="divFeedBack">
<pre id="SchermenInfo" >
</pre>
</div>
</body>
</html>
//Hervullen van de selectieboxen
function HervullenSelectieBoxen(){
slcSchermNummer.options.length = 0;
select.options.length = 0;
ToonScherm();
SchermNummerVullen();
ToonInfo();
}