J'ai une question pour la manipulation du DOM Javascipt. J'ai écrit une page HTML qui contient deux combos. La première zone de liste déroulante contient une liste de comtés. La deuxième zone de liste déroulante contient une liste de ...

0
hackermanwow 17 mars 2021 à 00:17

2 réponses

Meilleure réponse

L'une des solutions est la suivante, mais nous pouvons montrer de meilleures solutions si vous pouvez fournir un exemple de code source.

var data = [
  { country: 'A',  cities: ['A - 1', 'A - 2', 'A - 3']},
  { country: 'B',  cities: ['B - 1', 'B - 2', 'B - 3']},
  { country: 'C',  cities: ['C - 1', 'C - 2', 'C - 3']}
]
// Need to modify logic based on the data format.
const getCities = function(selectedCountry) {
  const target = data.find(d => d.country === selectedCountry);
  return target ? target.cities : [];
}

const changeCities = function (cities) {
  let html = '<option value="-">Cities</option>'
  for (let i in cities) {
    html += '<option value="' + cities[i] + '">' + cities[i] + '</option>'
  }
  document.querySelector('#cities').innerHTML = html;
}

document.querySelector('#countries').addEventListener('change', (event) => {
  const cities = getCities(event.target.value);
  changeCities(cities);
});
<select id="countries">
  <option value="-">Countries</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select id="cities">
  <option value="-">Cities</option>
</select>
0
pond27 16 mars 2021 à 22:19

Oui, je peux vous aider. Mais avant tout, vous devez montrer votre code. D'autre part, vous pouvez essayer cet exemple Visitez https: // ej2. syncfusion.com/documentation/combo-box/how-to/cascading/. Et si vous ne pouvez pas l'implémenter en tant que débutant, vous devriez apprendre à lier des données et à interroger des données à l'aide de javascript.

0
Safayet Jamil 16 mars 2021 à 21:30