如何让select下拉框定位到指定选项但不默认选中？

我们需要实现一个出生年份选择的select下拉框：打开下拉框时自动滚动到1994年（对应30岁，匹配多数用户年龄区间），但不能默认选中该选项，以此判断用户是否实际完成选择操作。

当前PHP生成的select代码如下：

<select name="year" required>
   <option value="" disabled selected> - </option>
   <?php for ($i = date('Y') - 110; $i <= date('Y'); $i++) : ?>
      <option value="<?php echo $i; ?>" <?php if ($i == $year) echo 'selected'; ?>>
         <?php echo $i; ?>
      </option>
    <?php endfor; ?>
</select>

之前尝试的jQuery代码会直接选中1994年的选项，无法满足仅滚动定位的需求：

$(document).ready(function() {
            
    const yearToScroll = 1994;
    const birthYearSelect = $('#geboortedatum_jaar');

    // Find the option index of 1994
    const optionIndex = birthYearSelect.find('option[value="' + yearToScroll + '"]').index();

    // Set the scroll position of the dropdown to show 1994
    birthYearSelect.prop('selectedIndex', -1); // Ensures no option is selected
    birthYearSelect[0].selectedIndex = optionIndex;
            
});

正确解决方案：使用scrollIntoView()实现无选中的滚动定位 #

通过调用目标option元素的scrollIntoView()方法，可以实现下拉框滚动到指定位置，同时保持原有的选中状态（即默认的disabled空选项）。

修改后的JS代码：

$(document).ready(function() {
    const yearToScroll = 1994;
    const birthYearSelect = $('#geboortedatum_jaar');
    // 获取目标年份对应的option DOM元素
    const targetOption = birthYearSelect.find(`option[value="${yearToScroll}"]`)[0];
    
    if (targetOption) {
        // 让目标选项滚动到下拉框视图的中间位置
        targetOption.scrollIntoView({ block: 'center', behavior: 'auto' });
    }
});

代码说明：

• scrollIntoView()是原生DOM方法，会自动调整滚动位置让目标元素可见，不会修改select的选中状态
• block: 'center'参数确保目标选项在下拉框中居中显示，提升用户体验
• 如果需要平滑滚动效果，可以将behavior改为'smooth'（部分旧浏览器可能不支持）

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