jQuery Mobile <select> produces extra 'ui-btn-text'

Question

I have the below code

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

but it seems to be generating the below markup

<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>

and the problem with this is that it is producing an extra span with my selected text in front of the dropdown list. How do I remove that span with selected text?

Answer 1

Just add a:

data-role="none" 

to your select element. This way your select box will not be enhanced.

Working example: http://jsfiddle.net/Gajotres/PMrDn/60/

This will of course prevent select from been styled. What I want to tell is there's no point in removing this span. Without it custom select box styles can't be shown, even more your original select is hidden so you will see absolutely nothing. This goes only if you want to have a custom select box, in any other case data-role="none" is what you want.