聚焦select元素会自动展开下拉框，是否可以阻止该行为？

可以在不展开下拉框的前提下为select控件设置焦点，不同场景下可以选用以下方案：

方案1：现代浏览器原生方案（推荐） #

Chrome 86+、Firefox 103+、Edge 90+版本都支持focus()方法的focusVisible可选参数，设置为false即可在设置焦点的同时不触发下拉展开：

// 获取下拉控件元素
const stateSelect = document.querySelector('#state-dropdown');
// 设置焦点且不展开下拉
stateSelect.focus({
  focusVisible: false
});

该方案无需额外兼容处理，逻辑最简单，适合面向现代浏览器的业务场景。

方案2：全浏览器兼容方案 #

如果需要兼容IE、低版本Chrome/Firefox，可以通过临时禁用控件的方式实现：

const stateSelect = document.querySelector('#state-dropdown');
// 临时禁用控件，阻止focus触发的下拉展开逻辑
stateSelect.disabled = true;
stateSelect.focus();
// 立刻恢复控件可用状态，焦点会保留在控件上
stateSelect.disabled = false;

// 可选补充：如果需要保留焦点高亮效果，可手动添加对应样式
stateSelect.classList.add('select-focus');
stateSelect.addEventListener('blur', () => {
  stateSelect.classList.remove('select-focus');
}, { once: true });

配套CSS示例：

.select-focus {
  outline: 2px solid #4d90fe;
  outline-offset: -2px;
}

该方案在所有主流PC浏览器下测试通过，无兼容性问题。

方案3：jQuery场景适配 #

如果项目使用jQuery，可直接使用如下简化写法：

const $stateSelect = $('#state-dropdown');
$stateSelect.attr('disabled', true).focus().attr('disabled', false);

注意事项 #

• 确保焦点设置操作在ajax请求完成、输入框重置逻辑执行结束后调用，避免时序问题导致的下拉意外展开。
• 移动端浏览器的select交互逻辑由系统内核控制，如遇到兼容问题可额外监听touchstart事件并阻止默认行为适配。

内容的提问来源于stack exchange，提问作者Bill in Kansas City