JQuery мобильных проблем с темами для выбора меню

Question

Использование меню выбора, например:

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

Когда пользователь щелкает опцию, запускается следующее событие клика:

$(".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);

    });

Когда я устанавливаю data-native-menu = "false", событие щелчка не срабатывает, но тема красиво применяется к указанным выше параметрам

Когда я устанавливаю data-native-menu = "true", событие щелчка срабатывает, но тема не применяется к опциям, когда меню выпадает.

Это происходит как в IE, так и в Chrome. Как я могу получить и тему и событие щелчка, чтобы стрелять?

Answer 1

$("#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);

});

Это должно сработать с или без. Вы хотите использовать функцию изменения вместо функции щелчка. Однако это правда, что вы можете применить функцию щелчка к любому элементу HTML, браузеры не всегда играют хорошо. Использование изменений в определенном смысле более конкретно для вашей ситуации, в данном случае это выпадающий список.

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

Я также немного очистил функцию. Пожалуйста, просмотрите и используйте по желанию.

Answer 2

Вы можете попробовать использовать событие change из select с отключенным собственным меню.

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