JavaScript實現的購物車效果可以運用在好多地方_javascript技巧

JavaScript實現的購物車效果，當然這個效果可以運用在好多地方，例如好友的選擇，人力資源模組，計算薪資，人員的選擇等等。下面看類似某種購物車的效果圖：

code：

goodsCar.js:這個js寫成了一個單獨的檔案。主要是控制上面的列表顯示的。

複製程式碼 程式碼如下:

window.onload=function(>

window.onload=function(>
};
var goods=["火腿","美女","禦姐","火星一日遊","跑車"];
//===== =============為什麼要定義一個暫存區要想清楚哦=============
var temps=[];//暫存
//初始化倉庫select 新增內容
function initStore(){
var select_store=document.getElementById("select_store");
for(var x=0;x{
//建立option物件
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x];
select_store.appendld(optionChild(option);
}
}
//------------------------------------
function selectGoods(){
//取得store的select列表物件
var out_store=document.getElementById("select_store");
//取得我的商品的select清單物件
清單物件
var in_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
function deleteGoods(){
//1.記錄下要移動的產品
var🎜>//1.記錄下要移動的產品
var in_store=document.getElementById("select_store");
var out_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
/* 商品：
1.inSotre:將商品移入倉庫
2.outStore：將商品移出倉庫
*/
//移動
function moveGoods(inStore,outStore){
/ /===============清空數組快取==================
temps=[];
//循環取得store中的所有清單項目
for(var x=0;x{
var option=outStore.options[x];
//將被選取的列表項目加到臨時數組中儲存
if(option.selected){
temps.push(option);//臨時數組中添加數據，為了避免重複，數組快取要清空
}
}
//2.在store清單中刪除已選取的物品

//3.在購物車中新增已選取的產品
for(var x=0;x{

//每一個節點都只有一個父節點//先刪除後加入outStore.removeChild(temps[x]); //添加inStore.appendChild(temps[x]); } }

下面是主文件; 複製程式碼 程式碼如下: