Javascript 在JQuery Mobile中创建供应列表
好的，现在的任务是，我正在为一所学校创建一个表单，它有一个从幼儿园到8年级的多个自定义选择菜单。我已经创建了菜单Javascript 在JQuery Mobile中创建供应列表,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,好的，现在的任务是，我正在为一所学校创建一个表单，它有一个从幼儿园到8年级的多个自定义选择菜单。我已经创建了菜单 <!DOCTYPE html> <html> <head lang="en"> <title>Supply List</title> <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<!DOCTYPE html>
<html>
<head lang="en">
<title>Supply List</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1> Supply List</h1>
</div>
<div data-role="content">
<form>
<p>
<div class="ui-field-contain">
<lable for="select-custom-19">Kindergarten</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Kindergarten</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">First Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>First Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Second Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Second Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Third Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Third Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Fourth Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Fourth Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Fifth Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Fifth Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Sixth Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Sixth Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Seventh Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Seventh Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
<div class="ui-field-contain">
<lable for="select-custom-19">Eighth Grade</lable>
<select name="select-customer-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Eighth Grade</option>
<option value="1">(48) #2 6-sided pencils (sharpened preferred)</option>
<option value="2">(2) Red Pencils</option>
<option value="3">(2) 2-pocket plastic folders (1ea. 1 blue, 1 green)</option>
<option value="4">(3) Box of 24ct crayons</option>
<option value="5">(2) Dry erase markers (blue or black)</option>
<option value="6">(1) Pencil box</option>
<option value="7">(6) Glue sticks</option>
<option value="8">(1) White 3-ring 1" binder</option>
<option value="9">(1) Pack of pink erasers</option>
<option value="10">(1) Pack of pencil cap erasers</option>
<option value="11">(1) Box of Kleenex (tissue)</option>
</select>
</div>
</p>
</form>
<button class="ui-btn ui-corner-all SupplyList">Supply List</button>
</div>
</div>
</body>
</html>
供应清单
供应清单
学前班
学前班
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
一年级
一年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
二年级
二年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
三年级
三年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
四年级
四年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
五年级
五年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
六年级
六年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
七年级
七年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
八年级
八年级
（48）#2支6面铅笔（最好是削尖的）
（2） 红铅笔
（2） 双袋塑料文件夹（1个蓝色，1个绿色）
（3） 一盒24ct蜡笔
（2） 干擦除标记（蓝色或黑色）
（1） 铅笔盒
（6） 胶棒
（1） 白色3环1“活页夹
（1） 一包粉红色的橡皮擦
（1） 一包铅笔帽橡皮擦
（1） 纸巾盒（纸巾）
供应清单
谢谢，在标记中添加第二页，例如：
<div data-role="page" id="page2">
<div data-role="header">
<h1> Chosen</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="lstChosen"></ul>
</div>
</div>
<a href="#page2" id="btnSupply" class="SupplyList" data-role="button">Supply List</a>
$(document).on("pageinit", "#page1", function(){
$("#btnSupply").on("click", function(){
var html = '';
$("#frmSupply select").each(function(idx){
var grade = $(this).find("option:first-child").text();
var sel = $(this).find("option:selected");
if (sel.length > 0){
html += '<li data-role="list-divider" >' + grade + '</li>';
sel.each(function(idx){
html += '<li>' + $(this).text() + '</li>';
});
}
});
$("#lstChosen").empty().append(html).listview("refresh");
});
});