Как сохранить динамически добавляемые значения выбора в локальном хранилище?

#javascript #forms #select #local-storage

#язык JavaScript #формы #выбирать #локальное хранилище

Вопрос:

Мне нужно сохранить значение lt;selectgt; в локальном хранилище, однако я не могу этого сделать, я предполагаю, что это связано с тем, что lt;optiongt; это lt;selectgt; было динамически добавлено, и я должен обрабатывать его на более высоком уровне. Но я не знаю, как это сделать.

HTML

 lt;select id="months" name="months"gt;  lt;option value='january'gt; January lt;/optiongt;  lt;option value='february'gt; February lt;/optiongt;  lt;option value='march'gt; March lt;/optiongt;  lt;option value='april'gt; April lt;/optiongt;  lt;option value='may'gt; May lt;/optiongt;  lt;option value='june'gt; June lt;/optiongt;  lt;option value='july'gt; July lt;/optiongt;  lt;option value='august'gt; August lt;/optiongt;  lt;option value='september'gt; September lt;/optiongt;  lt;option value='october'gt; October lt;/optiongt;  lt;option value='november'gt; November lt;/optiongt;  lt;option value='december'gt; December lt;/optiongt;  lt;/selectgt;   lt;select id="days" name="days"gt;lt;/selectgt;  

JS

 // dinamically add days const $months = document.getElementById('months') const $form = document.getElementById('form')  function dayOfMonthOne() {  for (let i = 1; i lt; 32; i  ) {  const days = `  lt;optiongt;${i}lt;/optiongt;  `  const $days = document.getElementById('days')  $days.innerHTML = $days.innerHTML   days  } }  function dayOfMonthZero() {  for (let i = 1; i lt; 31; i  ) {  const days = `  lt;optiongt;${i}lt;/optiongt;  `  const $days = document.getElementById('days')  $days.innerHTML = $days.innerHTML   days  }  }  function dayOfMonthEight() {  for (let i = 1; i lt; 29; i  ) {  const days = `  lt;optiongt;${i}lt;/optiongt;  `  const $days = document.getElementById('days')  $days.innerHTML = $days.innerHTML   days  } }  $months.addEventListener('change', function(){  switch ($months.value) {  case 'january':  $months.value = 'january'  dayOfMonthOne()  break  case 'february':  $months.value = 'february'  dayOfMonthEight()  break  case 'march':  $months.value = 'march'  dayOfMonthOne()  break  case 'april':  $months.value = 'april'  dayOfMonthZero()  break  case 'may':  $months.value = 'may'  dayOfMonthOne()  break  case 'june':  $months.value = 'june'  dayOfMonthZero()  break  case 'july':  $months.value = 'july'  dayOfMonthOne()  break  case 'august':  $months.value = 'august'  dayOfMonthOne()  break  case 'september':  $months.value = 'september'  dayOfMonthZero()  break  case 'october':  $months.value = 'october'  dayOfMonthOne()  break  case 'november':  $months.value = 'november'  dayOfMonthZero()  break  case 'december':  $months.value = 'december'  dayOfMonthOne()  break  } })  const $days = document.getElementById('days') $days.addEventListener('change', function(){  const dVal = $days.options[$days.selectedIndex].text   localStorage.setItem('day', dVal) })  

Ответ №1:

Похоже, вам нужно изменить способ доступа к $days свойствам:

const dVal = $days[$days.selectedIndex].text

или еще проще:

const dVal = $days.value

т. е. удалить .options

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

Вы также захотите запустить эту функцию при загрузке страниц, чтобы январь был заполнен.