尝试显示 select 特定月份的确切天数

Question

我正在尝试创建一个 select 月份和日期的表格。我想在 select 编辑特定月份时动态添加确切的天数。但是在运行 switch 语句之后，只有月份的一月、二月和四月 select 可用。谁能帮帮我？

html:

<select id="months" name="months">
            <option value='31'> January </option>
            <option value='28'> February </option>
            <option value='31'> March </option>
            <option value='30'> April </option>
            <option value='31'> May </option>
            <option value='30'> June </option>
            <option value='31'> July </option>
            <option value='31'> August </option>
            <option value='30'> September </option>
            <option value='31'> October </option>
            <option value='30'> November </option>
            <option value='31'> December </option>
        </select>

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

js:

const $months = document.getElementById('months')

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 dayOfMonthTwo() {
    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 '31':
            $months.value = '31'
            dayOfMonthOne()
            break
        case '30':
            $months.value = '30'
            dayOfMonthZero()
            break
        case '28':
            $months.value = '28'
            dayOfMonthTwo()
            break
    }
})

Answer 1

这是因为您在 switch 语句中设置了 $month.value。由于存在重复值，因此将选择第一个匹配项。在上述情况下，31 的第一个值是一月，二月是 28，四月是 30。

此外，在您的代码中，您只是连接选项。因此，当您从一个月更改为另一个月时，旧月份的选项不会被替换。

您也可以为此只使用一个函数，方法是获取月份的值并将其设置为 i < monthLengthInDays。

另一件事是通过 Date 对象获取天数。

new Date(year, monthOneBasedIndex, 0).getDate();

这将是 return 这个月的最后一天。

尝试显示 select 特定月份的确切天数

Trying to show exact mount of days when select specific month

javascript

calendar

switch-statement