もちろん、JavaScriptによって達成されたショッピングカート効果は、友人、人事モジュール、給与計算、人事選択など、多くの場所で使用できます。以下に似たショッピングカートのレンダリングがあります。
コード：
Goodscar.js：このJSは別のファイルとして記述されています。主に上記のリストの表示を制御します。
コードコピーは次のとおりです。
window.onload = function（）{
initstore（）;
};
var goods = ["ham"、 "Beauty"、 "Mother Lady"、 "Day Tour of Mars"、 "Sports Car"]];
// =========================== 1一時的な保管エリアを定義してはっきりと考える必要があるのはなぜですか========================================================================================================================
var temps = []; //一時的なストレージ
//リポジトリの初期化[コンテンツの追加]を選択します
function initstore（）{
var select_store = document.getElementById（ "select_store"）;
for（var x = 0; x <goods.length; x ++）
{
//オプションオブジェクトを作成します
var optionnode = document.createelement（ "option"）;
optionNode.innerhtml = goods [x];
select_store.appendChild（optionNode）;
}
}
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------ -
関数selectgoods（）{
//ストアの選択リストオブジェクトを取得します
var out_store = document.getElementById（ "select_store"）;
//私の製品の選択リストオブジェクトを取得します
var in_store = document.getElementById（ "select_my"）;
movegoods（in_store、out_store）;
}
関数deletegoods（）{
// 1。移動する製品を記録します
var in_store = document.getElementById（ "select_store"）;
var out_store = document.getElementById（ "select_my"）;
movegoods（in_store、out_store）;
}
/*
*モバイル製品：
1.insotre：商品を倉庫に移動します
2.アウトストア：倉庫から製品を取り外します
*/
//動く
関数movegoods（Instore、outstore）{
// ============================================================================== ==============================================================================
temps = [];
//ループストア内のすべてのリストアイテムを取得します
for（var x = 0; x <outstore.options.length; x ++）
{
var option = outstore.options [x];
//選択したリスト項目を一時配列に追加して保存します
if（option.selected）{
temps.push（option）; //一時配列にデータを追加します。複製を避けるには、配列キャッシュをクリアする必要があります
}
}
// 2。ストアリストで選択したアイテムを削除します
// 3。選択した製品をショッピングカートに追加します
for（var x = 0; x <temps.length; x ++）
{
//各ノードには、親ノードが1つしかありません
//最初に削除してから追加します
Outstore.RemoveChild（Temps [x]）;
//に追加
Instore.AppendChild（temps [x]）;
}
}
以下がメインファイルです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title>タイトルを挿入して</title>
<style type = "text/css">
テーブル{
国境：10px;
}
select {
幅：200px;
高さ：400px;
}
#order_area {
表示：なし;
}
</style>
<script type = "text/javascript" src = "goodscar.js"> </scrip>
<script type = "text/javascript">
var selectedGoods = []; //キャッシュエリア
//ショッピングカート内の製品に基づいて注文を作成する
関数CreateOrder（）{
//注文領域を表示します
var OrderAreadiv = document.getElementById（ "order_area"）;
/* divオブジェクトの下にメンバーオブジェクトスタイルがあります。このスタイルオブジェクトを通じて、divのスタイルを制御できます。
表示：Divと呼ばれるこのオブジェクトまたは要素がドキュメントでレンダリングされているかどうかを示します。
利用可能な値：
ブロック：オブジェクトはブロック要素としてレンダリングされます。
なし：オブジェクトはレンダリングされていません。
.........
この例では、上記の2つの値を使用するだけで問題ありません。上記のコンテンツはドキュメントからのものです
*/
//ノードオブジェクトの属性操作スタイルを使用します
OrderAreadiv.style.display = "block";
var select_my = document.getElementById（ "select_my"）;
for（var x = 0; x <select_my.options.length; x ++）{
//
var optnode = select_my.options [x];
selectedgoods.push（optnode.innerhtml）;
}
//製品の上を移動し、注文を生成します
for（var x = 0; x <selectedgoods.length; x ++）{
///*動的に生成するためのテンプレート
// <div> <！ - 名前属性は簡単に見つけることができます - >
// <入力タイプ= "チェックボックス" name = "myorder"> <span>ハンサムな男20 yuan </span>
// </div>
//*/
var divnode = document.createelement（ "div"）;
OrderAreadiv.AppendChild（DivNode）;
var inputmyorder = document.createelement（ "input"）;
inputmyorder.setattribute（ "type"、 "チェックボックス"）;
inputmyorder.setattribute（ "name"、 "myorder"）;
DivNode.AppendChild（inputMyorder）;
var spannode = document.createelement（ "span"）;
// 50〜100の乱数をランダムに生成する
var price = math.floor（math.random（）*50+50）;
inputMyORDER.VALUE = PRICE;
spannode.innerhtml = selectedgoods [x]+""+rice;
divnode.appendChild（spannode）;
//inputmyorder.appendChild(Spannode）;スパンと入力は同じレベルの要素であるため、エラー
//組み立てられたDivNodeをOrderListに追加します
var order_list = document.getElementById（ "order_list"）;
order_list.appendchild（divnode）;
}
}
/*
*どの注文が再生された注文で支払われる準備ができているかを選択してから支払いを行うことができます
選択する3つの方法：すべてを選択：1、選択しないでください：0、逆選択：2;チェックボックスの独自の機能は複数回選択できます
*/
functionmySelect（arg）{
// getElementsByName：名前タグ属性の値に基づいてオブジェクトのコレクションを取得します。
var Orders = document.getElementsByname（ "myorder"）;
//次の文は、コードを書くプロセス中に誤って使用されました
// getElementsByTagname：指定された要素名に基づいてオブジェクトコレクションを取得します。
// var Orders = document.getElementsByTagname（ "myorder"）;
for（var x = 0; x <order.length; x ++）{
var Orders = Orders [x];
if（arg == "1"）{
order.checked = true;
}
else if（arg == "0"）{
order.checked = false;
}
else if（arg == "2"）{
order.checked =！order.checked;
}
}
}
//チェックアウトと支払い、ここでは、ダイアログバージョンによってポップアップされたすべての製品の量を実証するために使用されます。
function paymoney（）{
var Orders = document.getElementsByname（ "myorder"）;
//合計価格
var sum = 0;
for（var x = 0; x <order.length; x ++）{
var Orders = Orders [x];
if（order.checked）{
//購入するものを確認してください。
sum = sum+number（order.value）;
}
}
alert（ "支払いたいかどうかがわかります"+sum+"yuan"）;
}
</script>
</head>
<body>
<表>
<tr>
<td>
<！ - 選択オブジェクトの複数属性の意味：リストで複数のアイテムを選択できるかどうかを示すブール値を設定または取得します - >
<select id = "select_store"倍数= "倍数">
<OptGroup Label = "Product List"> </optgroup>
</select>
</td>
<td>
<入力型= "button" value = ">>" onclick = "selectgoods（）;"/> <br>
<入力型= "button" value = "<<" onclick = "deletegoods（）;"/>
</td>
<td>
<select id = "select_my"倍数= "倍数">
<optgroup label = "私のショッピングカート"> </optgroup>
</select>
</td>
<td> <入力タイプ= "ボタン" value = "生成順序" onclick = "createorder（）;"/> </td>
</tr>
</table>
<hr/>
<div id = "order_area">
<h3>購入する製品を選択してください：</h3>
<div id = "order_list">
<！ - <div>
<入力型= "チェックボックス"> <span>ハンサムな男20元</span>
</div> - >
</div>
<入力型= "button" value = "all" all "onclick =" myselect（ '1'）; "/>
<入力型= "button" value = "not select" onclick = "mySelect（ '0'）;"/>
<入力型= "button" value = "anti-select" onclick = "mySelect（ '2'）;"/> <br>
<入力型= "button" value = "pay" onclick = "paymoney（）;"/>
</div>
</body>
</html>