带multiple属性的多级联动多选下拉框显示异常求助

为联系表单内的多级联动select标签添加multiple属性后，控件直接展示为平铺的普通列表样式，移除multiple属性才能恢复正常下拉形态，无法实现预期的多选下拉联动效果。

这是HTML原生控件的默认行为：带multiple属性的原生select元素，默认渲染为固定高度的滚动列表框，而非点击展开的下拉样式。你预期的下拉收起、支持多选的联动效果，并非原生multiple select可以实现，必须依赖自定义组件封装。你当前仅给原生select加multiple属性，再结合Bootstrap的form-control默认样式，就会出现你看到的异常显示。

• 优先使用成熟的多选下拉插件实现，开发成本最低，兼容性最好：
  常用的实现类库包括Select2、Bootstrap Multiselect，都支持和你现有Bootstrap表单样式无缝适配，且不影响你原有多级联动、表单提交、表单验证的逻辑。以Select2为例，操作步骤如下：
  1. 引入插件对应的CSS、JS资源到页面中
  2. 在页面DOM加载完成后，对三个层级的select做初始化，开启多选模式：

$(function(){
  // 初始化三级多选下拉
  $('#first_level, #second_level, #third_level').select2({
    multiple: true,
    allowClear: true,
    width: '100%' // 适配form-control的100%宽度
  });

  // 原有多级联动逻辑保留，下级选项加载完成后触发组件刷新即可
  $('#first_level').on('change', function(){
    // 你原有的加载二级分类的AJAX逻辑
    // 加载完成后调用下面这行刷新组件
    $('#second_level').trigger('change');
  });

  $('#second_level').on('change', function(){
    // 你原有的加载三级分类的AJAX逻辑
    $('#third_level').trigger('change');
  });
})

3. 原有PHP渲染选项、表单提交、字段验证的代码不需要做任何修改，可直接复用。

• 若不想引入第三方插件，需自行实现自定义下拉组件：用可点击的触发元素展示选中值，点击后弹出浮层，浮层内放置复选框组实现多选，选中值同步到隐藏表单域用于提交，该方案开发量较大，不推荐优先使用。

注意：不要尝试通过修改原生multiple select的size属性、CSS样式强行实现下拉效果，不同浏览器对原生控件的渲染逻辑差异极大，无法实现跨浏览器的统一表现，后期维护成本极高。

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