0

I have a problem with this code. I have to load data in json format (var data2) and populate the options in select id = "selezionaVetro". The select items depends on what I choose in the select name = "Tipo_sistema". Seems doesn't work very well because If i change the first select, in the second select remains some previus options.

Thanks in advance!

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>
zephod17
  • 5
  • 4
  • Run this loop backwards `for (var a = 0; a < select.options.length; a++) {` Every time you delete an item, the length is reduced by 1, so you never reach the end of it. – mastef Nov 13 '19 at 14:33
  • Basically you're deleting items from an array that you're currently iterating. You can look for some solutions in here : https://stackoverflow.com/a/28122081/10728554 – mastef Nov 13 '19 at 14:38
  • https://stackoverflow.com/questions/3364493/how-do-i-clear-all-options-in-a-dropdown-box – IgorK Nov 13 '19 at 14:39

2 Answers2

0

You should remove the previous options in reverse order.

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>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
0

For some reason, the for loop was not clearing all the options, but I was able to achieve clearing all the options with a while loop:

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

Here is the whole code (the only thing different is that I changed your for loop that clears the options for my while loop:

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

Credit goes to Rodrigo Longo in this post: https://stackoverflow.com/a/16107213/9454233

OnixFang
  • 16
  • 1
  • 2