使用选择菜单,如:
<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 =&#34; false&#34; click事件不会触发,但主题很好地应用于上面的选项
当我设置data-native-menu =&#34; true&#34;触发click事件,但菜单下拉时主题不会应用于选项。
这在IE和Chrome桌面都会发生。如何同时触发主题和点击事件?
答案 0 :(得分: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);
});
这应该有或没有。您想要使用更改功能而不是单击功能。但是,您可以将click函数应用于任何html元素,浏览器并不总能很好地运行。在某种意义上,使用变更更具体地针对您的情况,在这种情况下是选择下拉。
我还清理了一下这个功能。请随意查看和使用。
答案 1 :(得分:0)
您可以尝试使用change
中的select
事件并禁用原生菜单。
$("#select-choice-cognitive").change(function() { alert($(this).val()); });