JQuery Mobile - 隐藏下拉选项

Posted 2023-05-09

【中文标题】JQuery Mobile - 隐藏下拉选项

【英文标题】：JQuery Mobile - Hide Dropdown Option

【发布时间】：2013-09-23 11:20:36

【问题描述】：

我有一个下拉菜单，我想隐藏某些选项，除非我通过 data-native-menu="false" 使用 JQuery Mobiles 增强版时，选项（测试 2）不会隐藏。更进一步，我还需要在用户选择每个选项时动态更新这些内容。

http://jsfiddle.net/AzdaR/

<select data-mini="true" data-native-menu="true">
    <option>Test 1</option>
    <option style="display: none">Test 2</option>
    <option>Test 3</option>
</select>

<select data-mini="true" data-native-menu="false">
    <option>Test 1</option>
    <option style="display: none">Test 2</option>
    <option>Test 3</option>
</select>

【参考方案1】：

当使用自定义选择菜单时，您的select DOM 会在构建过程中被其他 DOM 元素替换。因此，您不能隐藏 option 元素并期望您的自定义选择菜单也会隐藏它们。

但是，您可以使用 disabled="disabled" 禁用该选项。

<select data-mini="true" data-native-menu="false">
    <option>Test 1</option>
    <option disabled="disabled">Test 2</option>
    <option>Test 3</option>
</select>

See this working demo

【讨论】：

感谢并添加 selectmenu("refresh", true);禁用后，我能够动态禁用它们。

【参考方案2】：

我只想更正一个拼写错误的单词

"disabled="disabled">Test 2"