I'm implementing a multiple select menu in jQuery mobile. I'd like to reference all selected items in a call back function (Ideally it would be triggered by the close event). The implementation illustrated below usually works for binding data to a change handler for single item menu but it doesn't even seem to be triggering. Any help would be appreciated.
<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>
Start with that you are using and old version of JQM with not matching css:
You are including 3 time jquery and different versions. leave only this one:
it's better practice to put scripts in the head area and also when using JQM to use the "pageinit" event so: