Question

我正在尝试编写一个函数来更新对象中的值。每当执行此操作时，我都想清除下拉菜单并用现在更新的值重新填充它，以及显示新更新的对象。除了将更新的值复制到我的下拉菜单中而不是清除并重新填充它之外，这种工作方式还可以。

数组：

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

我的功能：

这将在第一个下拉菜单中填充arry中每个对象的名称

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

这将使用数组中的对象数量填充第二个下拉菜单。

//Vullen selectiebox schermnummers
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);
        }
   }
}

这会在屏幕上显示（更新的）信息：

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

button {
  font-family: 'Open Sans', sans-serif;
  padding: 10px 20px;
  border-radius: 5px;
  border-style: solid;
  margin: 5px;
  width: 80%;
}
/* Eigen Invulling */

#divFeedBack {
  font-size: 1.5em;
}

.container {
  grid-template-columns: 350px auto;
  padding: 10px;
}

.item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
}

.grid-container{
  grid-template-columns: 400px auto;
  display:grid;
  padding: 10px;
}
.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  display: grid;
  padding: 10px;
}
input {
  margin-bottom: 15px;
}

select {
  margin-bottom: 15px;
}

label {
  display: inline-block;
  width:100px;
}

<!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>

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

function KoppelElementen(){
    h1Scherm = document.getElementById("h1Scherm");
    h2Titel = document.getElementById("h2Titel");
    pTekst = document.getElementById("pTekst");
    BerichtFoto = document.getElementById("BerichtFoto");
    SchermenInfo = document.getElementById("SchermenInfo");
    select = document.getElementById("slcScherm");
    txtScherm = document.getElementById("txtScherm");
    txtTekst = document.getElementById("txtTekst");
    txtTitel = document.getElementById("txtTitel");
    txtDuur = document.getElementById("txtDuur");
    txtImage = document.getElementById("txtImage");
    slcSchermNummer = document.getElementById("slcSchermNummer");
}
const info = GeefSchermInfo();

function Initieer(){
    KoppelElementen();
    ToonScherm(); 
}

function InitieerCrud(){
    KoppelElementen();
    ToonInfo();
    document.getElementById("slcScherm").onchange = ToonInfo;
    document.getElementById("slcSchermNummer").onchange = ToonInfo;
    document.getElementById("btnBevestig").onclick = InfoAanpassen;
}

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

//Vullen selectiebox schermnummers
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);
        }
   }
}

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

//Bewerken van de info
function InfoAanpassen(){
    var schermnummer = (slcSchermNummer.value)-1;
    for (var i = 0; i < info.length;i++ ){
        if (select.value == info[i].Scherm){
            info[i].Scherm = txtScherm.value;
            var JuistObject = info[i].Berichten[schermnummer];
            JuistObject.Titel = txtTitel.value;
            JuistObject.Tekst = txtTekst.value;
            JuistObject.Duur = txtDuur.value;
            JuistObject.Image = txtImage.value;
            
            /*
            ToonInfo();
            ToonScherm();
            SchermNummerVullen();
            */

            HervullenSelectieBoxen();
        }
    }
}


//Hervullen van de selectieboxen
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();
}

/* Eigen Invulling */

#divFeedBack {
  font-size: 1.5em;
}

.container {
  grid-template-columns: 350px auto;
  padding: 10px;
}

.item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
}

.grid-container{
  grid-template-columns: 400px auto;
  display:grid;
  padding: 10px;
}
.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  display: grid;
  padding: 10px;
}
input {
  margin-bottom: 15px;
}

select {
  margin-bottom: 15px;
}

label {
  display: inline-block;
  width:100px;
}

button {
  font-family: 'Open Sans', sans-serif;
  padding: 10px 20px;
  border-radius: 5px;
  border-style: solid;
  margin: 5px;
  width: 80%;
}

<!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 onload="InitieerCrud()" id="crud">
    <div class="grid-container">
      <!-- Rechterkant -->
        <div class="item">
          <h1>Digital signage</h1>
          <button id="btnHome" 
          <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>

我试图包含尽可能多与我的问题相关的代码

Answer 1

找到了答案。

我删除了函数HervullenSelectieBoxen（）中的代码

用

替换

//Hervullen van de selectieboxen
function HervullenSelectieBoxen(){
    slcSchermNummer.options.length = 0;
    select.options.length  = 0;
    ToonScherm();
    SchermNummerVullen();
    ToonInfo();
}

虽然不确定先前的代码出了什么问题：/

每当我想清除它时，下拉菜单都会复制选项

1 个答案: