jQuery Mobile <select>产生额外的'ui-btn-text'

Question

我有以下代码

<select id="country">
    <option value="1">Atlanta</option>
    <option value="2">Berlin</option>
</select>

但它似乎产生了以下标记

<div class="ui-select"><div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"><span>Atlanta</span></span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span>
<select id="country">
    <option value="1">Atlanta</option>
    <option value="2">Berlin</option>
</select>
</div></div>

而这个问题是它在下拉列表前面生成了一个带有我所选文本的额外跨度.如何删除所选文本的跨度？

Answer 1

只需添加一个:

data-role="none" 

到你的选择元素.这样您的选择框就不会得到增强.

工作示例:http://jsfiddle.net/Gajotres/PMrDn/60/

这当然会阻止选择风格.我想说的是删除这个范围是没有意义的.如果没有它,自定义选择框样式将无法显示,甚至更多原始选择被隐藏,因此您将看不到任何内容.只有当你想要一个自定义选择框时才会这样,在任何其他情况下,data-role ="none"就是你想要的.