如何将动态添加的 select 值存储到本地存储中？

Question

我需要将 <select> 的值存储到本地存储中，但是，我不能这样做我认为这是因为 <select> 的 <option> 是动态添加的，我应该在更高的层次上处理它。但是我不知道该怎么做。

html

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

        <select id="days" name="days"></select>

js

// dinamically add days
const $months = document.getElementById('months')
const $form = document.getElementById('form')

function dayOfMonthOne() {
    for (let i = 1; i < 32; i++) {
        const days = `
        <option>${i}</option>
        `
        const $days = document.getElementById('days')
        $days.innerHTML = $days.innerHTML + days
    }
}

function dayOfMonthZero() {
    for (let i = 1; i < 31; i++) {
        const days = `
        <option>${i}</option>
        `
        const $days = document.getElementById('days')
        $days.innerHTML = $days.innerHTML + days
    } 
}

function dayOfMonthEight() {
    for (let i = 1; i < 29; i++) {
        const days = `
        <option>${i}</option>
        `
        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)
})

Answer 1

您似乎需要修改访问 $days 属性的方式：

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

或者更简单：

const dVal = $days.value

即删除 .options

进一步的改进是创建一个函数来呈现 days 选项，而不是使用多个函数的巨大 switch 语句。

您还需要在页面加载时触发该功能，以便填充 1 月。

如何将动态添加的 select 值存储到本地存储中？

How to store dynamically added select values into localstorage?

javascript

forms

select

local-storage