Implementar el campo select con Jquery Mobile

A continuación veremos la forma de adaptar el campo select con Jquery Mobile, veremos desde lo básico hasta la manera de implemetarlo de una forma más avanzada. 

Básico select ...

<form>
<select name="frutas" id="frutas">
<option value="">Seleccionar fruta ...</option>
<option value="manzanas">Manzanas</option>
<option value="plantanos">Platanos</option>
<option value="naranjas">Naranjas</option>
<option value="limones">Limones</option>
</select>
</form>

Básico Mini select. Tener en cuenta los atributos que producen el cambio: data-mini="true" data-inline="true" ...

<form>
<select name="frutas" id="frutas" data-mini="true" data-inline="true">
<option value="">Seleccionar fruta ...</option>
<option value="manzanas">Manzanas</option>
<option value="plantanos">Platanos</option>
<option value="naranjas">Naranjas</option>
<option value="limones">Limones</option>
</select>
</form>

Avanzado select. Tener en cuenta el atributo que produce el cambio del menu nátivo al menú personalizado por Jquery Mobile: data-native-menu="false"...

<form>
<select name="frutas" id="frutas" data-native-menu="false">
<option value="">Seleccionar fruta ...</option>
<option value="manzanas">Manzanas</option>
<option value="plantanos">Platanos</option>
<option value="naranjas">Naranjas</option>
<option value="limones">Limones</option>
</select>
</form>

Avanzado Multi select. Atención a los nuevos atributos añadidos. multiple="multiple" data-native-menu="false"...

<form>
<select name="frutas" id="frutas" multiple="multiple" data-native-menu="false">
<option value="">Seleccionar fruta ...</option>
<option value="manzanas">Manzanas</option>
<option value="plantanos">Platanos</option>
<option value="naranjas">Naranjas</option>
<option value="limones">Limones</option>
</select>
</form>