如何将动态添加的选择值存储到本地存储中？答案

【问题标题】：How to store dynamically added select values into localstorage?如何将动态添加的选择值存储到本地存储中？
【发布时间】：2022-01-10 03:34:13
【问题描述】：

我需要将<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>

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

【问题讨论】：

标签： javascript forms select local-storage

【解决方案1】：

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

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

或者更简单：

const dVal = $days.value

即，删除.options

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

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

【讨论】：