如何在 jquery mobile 中添加自定义选择表单元素？答案

【问题标题】：how to add a custom select form element in jquery mobile?如何在 jquery mobile 中添加自定义选择表单元素？
【发布时间】：2013-02-16 01:17:56
【问题描述】：

我有一个带有选择菜单的简单表单：

<div data-role="page">
    <div data-role="popup" id="popupAddItem">
        <select name="select-choice" data-native-menu="false">
            <option>Select an option</option>
            <option value="a">A</option>
        </select>
    </div>
    <a href="#popupAddItem" data-rel="popup" data-role="button" data-icon="info">Add Item</a>
</div>

我添加了data-native-menu="false"，以便下拉菜单看起来更好，但如果表单位于弹出窗口中，它似乎不起作用。

所以如果我删除data-role="popup"，那么自定义选择元素似乎可以工作，否则不行。

这是一个错误，还是我做错了什么？见jsfiddle

【问题讨论】：

标签： javascript jquery forms jquery-mobile select

【解决方案1】：

我的理解是自定义选择菜单呈现为弹出窗口本身和 jQM 中的弹出窗口不能链接。

您可以使用 jQM 模式对话框而不是弹出窗口来实现类似的效果。

<div data-role="page">
    <a href="#popupAddItem" data-rel="dialog" data-role="button" data-icon="info">Add Item</a>
</div>
<div data-role="page" id="popupAddItem">
        <div data-role="content">
        <select name="select-choice" data-native-menu="false">
            <option>Select an option</option>
            <option value="a">A</option>
        </select>
        </div>
</div>

这里是jsFiddle

【讨论】：