JavaScriptで実装されたショッピングカートエフェクトは、友人選択はもちろん、人事モジュール、給与計算、人事選考など様々なところでご利用いただけます。以下はショッピング カートに似たもののレンダリングです:
コード:
goodsCar.js: この js は別のファイルとして記述されます。主に上記のリスト表示を制御します。
window.onload=function(){
initStore ();
};
var Goods=["ハム","ビューティー","ロイヤルシスター","火星への日帰り旅行","スポーツカー"]; ==== ============= 一時記憶領域を定義する必要がある理由を明確に考えてください =============
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]; .appendChild(optionNode);
}
}
//---------------------------- --------------
function selectGoods(){
//ストアの選択リスト オブジェクトを取得します
var out_store=document.getElementById("select_store");
//商品の選択リスト オブジェクトを取得します
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
function deleteGoods(){
//1. 移動する商品を記録します
var in_store=document.getElementById("select_store");
moveGoods(in_store, out_store);
}
/*
* 商品の移動:
1.inSotre: 商品を倉庫に移動
2.outStore: 商品を倉庫から移動
*/
//Move
function moveGoods(inStore,outStore){
/ /================配列キャッシュをクリア========= =========
temps=[];
// ストア内のすべてのリスト項目を取得するループ
for(var x=0;x{
var option=outStore.options[x];
// 選択したリスト項目を保存用の一時配列に追加します
if(option.selected){
temps.push (オプション);//重複を避けるために、配列キャッシュをクリアする必要があります
}
}
//2. ストアリストで選択したアイテムを削除します
//3. 選択した商品をショッピング カートに追加します
for(var x=0;xinStore.appendChild(temps[x]);
}
}
以下はメイン ファイルです。
コードをコピーします
コードは次のとおりです。 🎜>
