2012-05-15 44 views
0

我在jQuery手機中實現了多選菜單。我想引用回調函數中的所有選定項(理想情況下,它將由關閉事件觸發)。下面說明的實現通常用於將數據綁定到單個項目菜單的更改處理程序,但它似乎不是觸發。任何幫助,將不勝感激。jQuery Mobile多選菜單,引用回調中的選擇

<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <link rel="stylesheet" href="../_assets/css/jqm-docs.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"> 
     < /script 
      <meta http-equiv="Content-Type" content="text/html; 
     charset = UTF - 8 "/> 
      <meta name=" 
     viewport " content=" 
     width = device - width, user - scalable = no " /> 

</head> 

<body onload=" 
     initialize()"> 
    <script type=" 
     text/javascript "> 

     $(document).ready(function() { 
      $("#selectMenu ").on("change ", {testdata: "test "}, filterSelectHandler); 
     }); 

    function filterSelectHandler(e) { 
    alert($(": selected ", $(this))); 
    } 

    </script> 
    <div data-role="page"> 
     <div data-role="header"></div> 
     <div data-role="content"> 
      <select name="select-choice-1" id="selectMenu" multiple="multiple" data-native-menu="false"> 
       <option value="standard">Option 1</option> 
       <option value="rush">Option 2</option> 
       <option value="express">Option 3</option> 
       <option value="overnight">Option 4</option> 
      </select> 
     </div> 
    </div> 
    </body> 

回答

0

開始與你正在使用老版本JQM與不匹配CSS:

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
try this one instead: 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

要包括3次jQuery和不同的版本。 只有這一個離開:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

這是更好的做法,把腳本的頭部區域,還利用JQM使用「pageinit」事件,所以當:

<script type="text/javascript"> 
    $(document).on("pageinit", function() { 
     $("#selectMenu").on("change", filterSelectHandler); 
     function filterSelectHandler(e) { 
      alert($(":selected", $(this))); 
     } 
    }); 

</script> 
相關問題