在 JQuery 移动设备中创建供应清单

Question

好吧，手头的任务是我正在为一所学校创建一个表单，该学校有多个自定义 select 菜单，适用于幼儿园到 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>

所以我坚持的步骤是如何打开一个新页面，其中包含从多个自定义 select 菜单中 select 删除的所有项目的列表。因此，当他们单击名为 Supply List 的按钮时，它将合并 selected 的所有内容，并且他们可以轻松查看 Supply 列表以进行购物。

谢谢，

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

我在页面中放置了一个空列表视图，当您在第一页中单击该按钮时将填充该列表视图。在第一页上，我将按钮更改为 link，ID 为：

<a href="#page2" id="btnSupply" class="SupplyList" data-role="button">Supply List</a>

当您单击此按钮时，它将导航到第 2 页并且脚本将填充列表：

$(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");
    });
});

此脚本遍历表单中的所有 SELECT 元素。对于每一个，它从第一个选项中获取等级名称，然后是所选选项的列表（如果有）。如果找到选定的选项，请创建一个列表分隔符，其中包含每个选定选项的等级名称和列表项。最后将所有创建的listitem追加到第2页的listview中。

Here is a DEMO

在 JQuery 移动设备中创建供应清单

Creating Supply List in JQuery Mobile

html

javascript

jquery

jquery-mobile