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" 就是您想要的。