如何在jquery mobile中的选择菜单上触发/打开本机菜单？答案

【问题标题】：How to trigger / open native menu on select menu in jquery mobile?如何在jquery mobile中的选择菜单上触发/打开本机菜单？
【发布时间】：2014-01-23 13:42:58
【问题描述】：

如何以编程方式使用 jquery 打开下面的选择菜单

<select id="selectMenu">        
 <option value="" class="first">c</option>       
 <option value="" class="">c++</option>       
 <option value="" class="">java</option> 
</select>

我试过代码

<script>
 $(document).on("pageinit", "#Test", function(e){
 $('.testSelect').on('tap',function() {
// $('#selectMenu').click();
 $('#selectMenu').selectmenu();
// $('#selectMenu').selectmenu('refresh');
 $('#selectMenu').selectmenu( "open" );
 $('#selectMenu').trigger("click");
 });
 });
</script>

但这对我没有帮助，它适用于选择选项的非本地菜单（即当我使用 data-native-menu= "false" 但不适用于我正在寻找的内容时。）

真正的问题是我想使用图像作为选择菜单按钮，它将在桌面浏览器以及移动设备上显示选择标签的本机菜单

所以我正在考虑点击图片我会打开选择菜单（本机菜单），我有隐藏选择菜单标签。

任何帮助将不胜感激。

【问题讨论】：

标签： jquery select

【解决方案1】：

要将图像用作 jquery 中的选择菜单按钮，需要覆盖 jquery 在创建选择菜单时添加的 jquery 类。

无需更改 jquery .css 文件，只需使用标签的样式属性覆盖它们（属性/属性）即可。

使用下面的代码来做这对我有用 ->

<div class="ui-select">
    <div data-icon="none" data-theme="a" class="ui-btn" style="margin: 0px; text-align: inherit;">
            <img class="img-responsive" alt="" src="../../images/image.png" style="">           
        <select id="selectMenuCls" data-native-menu="true" size="0" data-role="none">         
            <option value="" class="first">c</option>       
            <option value="" class="">c++</option>       
            <option value="" class="">java</option> 
        </select>
    </div>
</div>

请注意，在选择标签中 data-role="none" 属性是必不可少的，这样 jquery 就不会将其自定义类应用于选择菜单

【讨论】：