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();
}