I have the following select set up. I see it displayed with the first option showing. However, when I click to see the other items, nothing happens. Why won't the dropdown expand to show them?
<div data-role="page" id="movies">
<div data-role="header">
<img src="/Content/Images/baron-funds-logo.svg" />
</div><!-- /header -->
<div role="main" class="ui-content">
<h3>Movies</h3>
<br />
<div class="ui-field-contain">
<label for="select-native-1">Movies</label>
<select name="select-native-1" id="select-native-1">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
</select>
</div>
<a href="#home-page" data-role="button">Home</a>
<div data-role="footer">
<!-- footer is in layout -->
</div><!-- /footer -->
</div>
EDIT:
I tried an experiment. In the same app I added this page:
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
It behaves the same way. Nothing happens.
Check this to see if is your case...
JQuery Mobile Select Box not working
... apparently, you could need to create the
formtag or add adata-native-menu="false".If this don't work and you can, also try to update your jquery and jquery mobile sources files to the last version compatible.
I hope it helps