uni-app打开网页时，select多选后界面仍显示选择了0项

uni-app打开网页时，select多选后界面仍显示选择了0项

UniApp做的app打开H5网页，网页中的select multiple多选有问题，选择了之后页面总是显示：选择了0项


更多关于uni-app打开网页时，select多选后界面仍显示选择了0项的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用手机默认浏览器打开就没问题

更多关于uni-app打开网页时，select多选后界面仍显示选择了0项的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于uni-app的Webview与H5页面中的原生<select multiple>元素交互存在兼容性问题导致的。在uni-app的Webview环境中，H5页面的多选下拉框可能无法正确触发change事件或获取selectedOptions。

解决方案：

  1. 使用替代方案：避免在uni-app的Webview中直接使用原生多选下拉框。建议使用H5端的UI框架（如Element UI、Vant等）提供的多选组件，这些组件通常有更好的兼容性。

  2. 监听事件处理：如果必须使用原生select，尝试通过JavaScript手动监听并处理选项变化：

    const select = document.querySelector('select[multiple]');
select.addEventListener('change', function() {
  const selected = Array.from(this.selectedOptions).map(opt => opt.value);
  console.log('已选择:', selected);
  // 更新显示文本
});
回到顶部