Question

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

谢谢！

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

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

Answer 1

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

for (let i = select.options.length - 1; i >= 0; i--) {
  select.options[i].remove();
}

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

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

Answer 2

由于某种原因，for循环没有清除所有选项，但是我能够通过while循环清除所有选项：

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

这是整个代码（唯一不同的是我更改了for循环，从而清除了while循环的选项：

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

Javascript从json

2 个答案: