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

Question

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

<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

Answer 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