Блог

Главная - Вопросы по программированию - Изменение значений выпадающего списка в Javascript

Изменение значений выпадающего списка в Javascript

#javascript #html #combobox

Вопрос:

У меня есть вопрос по манипуляциям с Javascipt DOM. Я написал HTML-страницу, содержащую два поля со списком. Первое поле со списком содержит список округов. Второе поле со списком содержит список городов в пределах округа, выбранного в первом поле со списком. И я не могу понять, как сделать следующее: всякий раз, когда значение в первом поле со списком меняется, второе поле со списком будет обновляться соответствующим образом. Я был бы признателен, если бы кто-нибудь мог мне помочь, я новичок в JS. Спасибо!

Комментарии:

1. Пожалуйста, отредактируйте свой вопрос и включите комбинации в качестве кода в свой вопрос. Показав нам ваш код, мы сможем оценить уровень, на котором вы находитесь в настоящее время, и проясним детали, которые вы пытаетесь выяснить. Любой JavaScript, который показывает попытку заставить его работать, также настоятельно рекомендуется, так как мы будем знать, что вы уже пробовали. Включите эти вещи, и ваш ответ будет более сфокусированным.

Ответ №1:

Одно из решений заключается в следующем, но мы можем показать лучшие решения, если вы предоставите образец исходного кода.

 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>
Метки: