jqueryjquery-mobilejquery-mobile-select

jQjuery Mobile - Select Not working

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.

Solution

  • Check this to see if is your case...

    JQuery Mobile Select Box not working

    ... apparently, you could need to create the form tag or add a data-native-menu="false". 

    <!DOCTYPE html>

<html>
<body>

<form action="#" method="get">
  <select data-native-menu="false">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</form>

</body>
</html>

    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