2012-02-03 69 views
0

使用一個選擇菜單,如:jQuery Mobile的問題與主題的選擇菜單

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

    }); 

當我設置數據本土-menu =「false」點擊事件不會觸發,但主題很好地應用於上述選項

當我設置data-native-menu =「true」時,click事件觸發但主題未應用於Ø當菜單下降時。

這發生在IE和Chrome桌面。我怎樣才能讓主題和點擊事件觸發?

回答

0

您可以嘗試使用select中的change事件,並禁用本機菜單。

$("#select-choice-cognitive").change(function() { alert($(this).val()); }); 
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/

我還清理了一個功能的位。請檢查並隨意使用。