使用“select”标签的“multiple”属性时，如何更改移动Safari的默认文本“0 items”？

Posted 2023-03-14

【中文标题】使用“select”标签的“multiple”属性时，如何更改移动Safari的默认文本“0 items”？

【英文标题】：How to change the mobile safari's default text "0 items" when using the "multiple" attribute of the "select" tag?

【发布时间】：2013-09-04 12:05:06

【问题描述】：

我在 html 标签“select”中使用了“multiple”属性。

<select multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>                         
</select>

在移动 Safari 中，默认情况下它会在框中显示“0 个项目”。当我选择超过 1 个项目时，比如 3 个，那么它会在框中显示“3 个项目”。

是否可以将默认文本从“0 个项目”更改为“选择选项”之类的其他内容？

【参考方案1】：

是的。这就是您需要的：对于您的第一个选项，只需添加

<option disabled selected class="hidden">Select option(s)</option>

隐藏类很简单：

.hidden  display:none; 

然后在焦点上，使用jquery删除第一个选项的“selected”属性/属性：

$('select').on('focus', function() 
    $(this).children(':first-child').removeProp('selected');
);

【讨论】：

这对 Chrome 和 IE 不起作用， 标签不支持诸如 display:none 之类的样式，因此除非您使用浏览器检测，否则您仍然会在这些浏览器中看到它（哎呀) 删除它。

OP 确实特别要求 Safari 公平