CODEWITHSUNDEEP
jqueryselectmobilemenujquery-mobile
user525504
user525504

Reputation: 163

jquery mobile problems with themes for select menu

Using a select menu like:

<link href="../Style/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<div data-role="content">
    <select name="select-choice-cognitive" id="select-choice-cognitive" data-theme="b" data-icon="gear" data-inline="false" data-native-menu="false" >
            <option class="cognitivelist" value="ce">Option 1</option>
            <option class="cognitivelist" value="cnc">Option 2</option>
            <option class="cognitivelist" value="cdr">Option 3</option>
    </select>
</div>

When the user clicks an option, the following click event fires:

$(".cognitivelist").click(function (event) { //all items with the class .lessonlist  click event
        strname = (this.value)
        var pt='../Programs/'+ strname +'/' + strname +'.htm'
        window.location.href(pt);

    });

When I set data-native-menu="false" the click event does not fire but the theme is nicely applied to the options above

When I set data-native-menu="true" the click event fires but the theme is not applied to the options when the menu drops down.

This occurs in both IE and Chrome desktop. How can I get both the theme and the click event to fire?

Upvotes: 0

Views: 955

Answers (2)

Dustin Cooper
Dustin Cooper

Reputation: 11

$("#select-choice-cognitive").change(function (event) { //all items with the class .lessonlist  click event
    var strname = $(this).val(),
        pt='../Programs/'+ strname +'/' + strname +'.htm';
    window.location.href(pt);

});

That should do the trick with or without. You want to use the change function instead of the click function. However it is true that you can apply the click function to any html element, the browsers do not always play nicely. Using change is in a sense more specific to your situation, in this case a select drop down.

http://api.jquery.com/change/

I have also cleaned up a the function a bit. Please review and use at will.

Upvotes: 1

Ricardo Souza
Ricardo Souza

Reputation: 16468

You can try to use the change event from the select with native menu disabled.

$("#select-choice-cognitive").change(function() { alert($(this).val()); });

Upvotes: 0

Related Questions