关于 html:Javascript 从 json 填充选择选项


Javascript populate select option from json

我对这段代码有疑问。我必须以 json 格式(var data2)加载数据并填充 select id = "selezionaVetro" 中的选项。选择项目取决于我在选择名称 = "Tipo_sistema" 中选择的内容。
似乎效果不佳，因为如果我更改第一个选择，则在第二个选择中仍保留一些以前的选项。

提前致谢！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var data2 = {
 "sistemi": {
   "scorr_vel_class_": {
     "maxL": 110,
     "maxH": 270,
     "vetro": ["Trasparente","Trasp satinato","Stampa digitale"]
    },
   "scorr_vel_minimal_": {
     "maxL": 110,
     "maxH": 270,
     "vetro": ["Trasparente","Trasp satinato","Extrachiaro"]
    }
  }
}



function loadLista() {
  var select = document.getElementById("selezionaVetro");
  var opzioni = data2.sistemi[document.getElementsByName("Tipo_sistema")[0].value].vetro;

  for (var a = 0; a < select.options.length; a++) {
    select.options[a].remove(a);
  }

  for (var i = 0; i < opzioni.length; i++) {
    var opt = opzioni[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
  }
}
1
2
3
4
5
6
7
8
<select name="Tipo_sistema" class="col-6 custom-select mb-3" onchange="loadLista();">
  <option selected value="scorr_vel_class_">Scorrevole a veletta classico</option>
  <option value="scorr_vel_minimal_">Scorrevole a veletta minimal</option>
</select>

<select id="selezionaVetro">
  <option>Choose a number</option>
</select>

相关讨论

出于某种原因，for 循环没有清除所有选项，但我能够使用 while 循环清除所有选项：

1
2
3
while (select.options.length > 0) {
  select.remove(0);
}

这是整个代码(唯一不同的是我改变了你的 for 循环，清除了我的 while 循环的选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var data2 = {
 "sistemi": {
   "scorr_vel_class_": {
     "maxL": 110,
     "maxH": 270,
     "vetro": ["Trasparente","Trasp satinato","Stampa digitale"]
    },
   "scorr_vel_minimal_": {
     "maxL": 110,
     "maxH": 270,
     "vetro": ["Trasparente","Trasp satinato","Extrachiaro"]
    }
  }
}

function loadLista() {
  var select = document.getElementById("selezionaVetro");
  var opzioni = data2.sistemi[document.getElementsByName("Tipo_sistema")[0].value].vetro;

  while (select.options.length > 0) {
    select.remove(0);
  }

  for (var i = 0; i < opzioni.length; i++) {
    var opt = opzioni[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
  }
}

在这篇文章中归功于 Rodrigo Longo：https://stackoverflow.com/a/16107213/9454233

相关讨论

您应该以相反的顺序删除之前的选项。

1
2
3
for (let i = select.options.length - 1; i >= 0; i--) {
  select.options[i].remove();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var data2 = {
 "sistemi": {
   "scorr_vel_class_": {
     "maxL": 110,
     "maxH": 270,
     "vetro": ["Trasparente","Trasp satinato","Stampa digitale"]
    },
   "scorr_vel_minimal_": {
     "maxL": 110,
     "maxH": 270,
     "vetro": ["Trasparente","Trasp satinato","Extrachiaro"]
    }
  }
}

triggerEvent(document.querySelector('select[name="Tipo_sistema"]'), 'change');

function loadLista() {
  var select = document.getElementById('selezionaVetro');
  var opzioni = data2['sistemi'][document.querySelector('select[name="Tipo_sistema"]').value].vetro;
  for (let i = select.options.length - 1; i >= 0; i--) {
    select.options[i].remove();
  }
  opzioni.forEach(opzion => select.appendChild(new Option(opzion, opzion)));
}

function triggerEvent(el, eventName) {
  var event = document.createEvent('HTMLEvents');
  event.initEvent(eventName, true, false);
  el.dispatchEvent(event);
}
1
2
3
4
5
6
7
8
<select name="Tipo_sistema" class="col-6 custom-select mb-3" onchange="loadLista();">
  <option selected value="scorr_vel_class_">Scorrevole a veletta classico</option>
  <option value="scorr_vel_minimal_">Scorrevole a veletta minimal</option>
</select>

<select id="selezionaVetro">
  <option>Choose a number</option>
</select>