移动端浏览器下通过JavaScript切换多选/单选Select组件

完全可以实现这个需求，核心是两步：检测当前是否为移动端环境，操作DOM移除select元素的multiple属性。

实现思路 #

1. 移动端检测：结合用户代理（User Agent）和屏幕宽度判断，两种方式结合能提升检测准确性；
2. DOM操作：获取目标select元素，确认是移动端时调用removeAttribute方法移除multiple属性，即可将多选下拉框切换为单选。

完整代码示例 #

首先是页面加载完成后的基础初始化处理：

// 检测是否为移动端
function isMobile() {
    // 匹配常见移动端设备的用户代理关键词
    const mobileAgents = ['android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone'];
    const isMobileUA = mobileAgents.some(key => navigator.userAgent.toLowerCase().includes(key));
    // 结合屏幕宽度判断（以768px作为移动端阈值，可按需调整）
    const isSmallScreen = window.innerWidth <= 768;
    return isMobileUA || isSmallScreen;
}

// 页面加载完成后执行切换逻辑
document.addEventListener('DOMContentLoaded', function() {
    const planSelect = document.getElementById('plan');
    if (planSelect && isMobile()) {
        planSelect.removeAttribute('multiple');
    }
});

如果需要响应窗口大小变化（比如桌面端浏览器窗口被拉小到移动端尺寸时自动切换），可以添加窗口resize监听：

// 监听窗口尺寸变化
window.addEventListener('resize', function() {
    const planSelect = document.getElementById('plan');
    if (!planSelect) return;

    if (isMobile()) {
        planSelect.removeAttribute('multiple');
    } else {
        // 桌面端恢复多选属性（如需保持桌面端多选功能）
        planSelect.setAttribute('multiple', 'multiple');
    }
});

补充说明 #

• multiple是布尔属性，只要存在该属性，select就会是多选模式，移除后自动切换为单选；
• 屏幕宽度阈值（768px）可根据你的响应式设计需求自行调整；
• 用户代理检测可能存在兼容问题，结合屏幕宽度判断能覆盖更多场景。

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