How to store dynamically added select values into localstorage?-CodePudding

I need to store the value of <select> into local storage, however, I cannot do this I assume that is because the <option> of this <select> was dynamically added and I should handle it in a higher level. But I don't know how to do this.

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

CodePudding user response：

It looks like you need to modify how you're accessing the $days properties:

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

or even more simply:

const dVal = $days.value

ie, remove .options

Further enhancements would be to create a single function for rendering the days options instead of a giant switch statement that uses multiple functions.

You will also want to trigger that function on pageload so that January gets populated.