JavaScript下拉框年份选项选中失效问题求助

我来帮你搞定这个年份选中的问题！你的核心问题出在年份选择的JavaScript逻辑上——你错误地把计算出来的年份数值直接当成了下拉框选项的索引，但实际上下拉框选项的索引和年份值完全不匹配。

为什么原来的代码不行？ #

看你用PHP生成的年份下拉框：

• 前两个选项的索引是0（显示"Year"）和1（显示"----"）
• 从索引2开始才是具体的年份，比如当前年份2024是索引2，2023是索引3，……，1924是索引102（因为$numYears=100）

而你JS里的代码document.getElementById("dob-year").options[year].selected=true;，当输入880520时，计算出的year是1988，这个数值远大于下拉框选项的总数量（大概102个左右），自然找不到对应的选项，所以无法选中。

修正后的JavaScript代码 #

我们需要遍历年份下拉框的所有选项，找到value等于计算出的年份的选项，再设置它为选中状态：

function completeDOB() {
    var x = document.getElementById('textvalue').value;
    // 先判断输入是否为6位数字，避免后续报错
    if(!/^\d{6}$/.test(x)) return;
    
    var str = x.match(/.{1,2}/g);
    
    // 处理日期
    var day = parseInt(str[2],10) +1;
    document.getElementById("dob-day").options[day].selected=true;
    
    // 处理月份
    var month = parseInt(str[1],10) +1;
    document.getElementById("dob-month").options[month].selected=true;
    
    // 处理年份（修正部分）
    var year = parseInt('19' + str[0],10);
    var yearSelect = document.getElementById("dob-year");
    // 遍历所有选项，匹配对应年份的value
    for(var i = 0; i < yearSelect.options.length; i++){
        if(yearSelect.options[i].value == year){
            yearSelect.options[i].selected = true;
            break; // 找到后停止遍历，提升效率
        }
    }
}

额外优化建议 #

• 我加了输入合法性判断，避免用户输入非6位数字时触发报错
• 其实处理月份和日期时，也可以改成匹配value的方式，这样如果下拉框结构后续变化（比如新增空选项），代码也不会失效

内容的提问来源于stack exchange，提问作者hatched