iOS端禁用原生选择面板求助（使用Select2自定义选择器）

嘿，这个问题我之前在iOS上折腾过好几次，确实有点棘手——iOS的原生select面板有时候就像个顽固的小家伙，常规的preventDefault()和blur()经常搞不定它。不过别担心，我有几个靠谱的方案，你可以试试：

方案1：拦截原生select的触发事件（推荐） #

iOS的原生选择面板通常是在touchstart或focus事件触发后弹出来的，比click事件早一步。所以我们可以在这些事件上直接阻止默认行为，同时手动触发Select2的下拉：

// 给所有用Select2初始化的select绑定事件
$('select').on('touchstart focus', function(e) {
  // 阻止原生行为
  e.preventDefault();
  e.stopPropagation();
  
  // 如果Select2下拉没打开，就手动打开它
  const select2Instance = $(this).data('select2');
  if (!select2Instance || !select2Instance.isOpen()) {
    $(this).select2('open');
  }
});

再给原生select加个CSS，让它尽量不干扰布局：

select {
  /* 让原生select不可见但保留位置，避免布局偏移 */
  position: absolute;
  opacity: 0;
  z-index: -1;
}

方案2：用隐藏input替代原生select（彻底解决） #

如果上面的方案还是偶尔失效，那干脆换掉原生select，用hidden input来承载Select2——这样从根源上杜绝iOS原生面板的触发：

<!-- 用hidden input代替原生select -->
<input type="hidden" id="custom-select">

然后初始化Select2时直接传入选项数据：

$('#custom-select').select2({
  // 替换成你原来的选项数据
  data: [
    { id: 'option-1', text: '选项1' },
    { id: 'option-2', text: '选项2' },
    { id: 'option-3', text: '选项3' }
  ],
  // 其他Select2配置按需添加
  placeholder: '请选择',
  width: '100%'
});

这个方法唯一需要注意的是把原来select的选项转换成Select2支持的data格式，遍历原option就能轻松生成，完全没难度。

方案3：调整Select2的初始化配置增强效果 #

有时候Select2的默认行为会和iOS冲突，你可以在初始化时加上这些配置，配合方案1一起用：

$('select').select2({
  // 把下拉框挂载到body上，避免和原生元素层级冲突
  dropdownParent: $('body'),
  // 阻止自动聚焦原生select
  focus: function() {
    return false;
  }
});

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