2012-05-15 6 views
0

Я реализую меню множественного выбора в мобильном устройстве jQuery. Я хотел бы ссылаться на все выбранные элементы в функции обратного вызова (в идеале это будет вызвано событием закрытия). Реализация, проиллюстрированная ниже, обычно работает для привязки данных к обработчику изменений для меню с одним элементом, но даже не кажется, что он запускается. Любая помощь будет оценена по достоинству.Меню jQuery Mobile Multiple Select, ссылающееся на выбор в обратном вызове

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