JavaScript implementation of the shopping cart effect can be used in many places _javascript skills

JavaScript to achieve the effect of the shopping cart, of course, this effect can be used in many places, such as the choice of friends, Human resources module, calculate salary, personnel selection and so on. Here's a look at some kind of a shopping cart effect chart:

Code

Goodscar.js: This JS is written in a separate file. The main control is shown in the list above.

Copy Code code as follows:

Window.onload=function () {
Initstore ();
};
var goods=["Ham", "Beauty", "Chinese", "Day tour of Mars", "sports car"];
================== Why do you want to define a temporary storage area? Well, =============.
var temps=[];//temporary storage
Initialize Warehouse Select Add Content
function Initstore () {
var Select_store=document.getelementbyid ("Select_store");
for (Var x=0;x<goods.length;x++)
{
Create option Object
var optionnode=document.createelement ("option");
OPTIONNODE.INNERHTML=GOODS[X];
Select_store.appendchild (Optionnode);
}
}
//------------------------------------
function Selectgoods () {
Get the select list object for the store
var Out_store=document.getelementbyid ("Select_store");
Get a select list object for my product
var In_store=document.getelementbyid ("Select_my");
Movegoods (In_store,out_store);
}
function Deletegoods () {
1. Record the products to be moved
var In_store=document.getelementbyid ("Select_store");
var Out_store=document.getelementbyid ("Select_my");
Movegoods (In_store,out_store);
}
/*
* Mobile Products:
1.inSotre: Move the goods into the warehouse
2.outStore: Move the goods out of the warehouse
*/
Move
function Movegoods (instore,outstore) {
=============== empty Array Cache ==================
Temps=[];
Loop through all list items in the store
for (Var x=0;x<outstore.options.length;x++)
{
var option=outstore.options[x];
To add a selected list item to a temporary array for storage
if (option.selected) {
Temps.push (option);//temporary array to add data, in order to avoid duplication, the array cache to empty
}
}
2. Delete items that are already selected in the store list
3. Add products that have been selected in the shopping cart
for (Var x=0;x<temps.length;x++)
{
Each node has only one parent node
Delete First and then add
Outstore.removechild (Temps[x]);
Add to
Instore.appendchild (Temps[x]);
}
}

The following is the main file;

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<style type= "Text/css" >
table{
border:10px;
}
select{
width:200px;
height:400px;
}
#order_area {
Display:none;
}
</style>
<script type= "Text/javascript" src= "Goodscar.js" ></script>
<script type= "Text/javascript" >
var selectedgoods=[];//cache Area
Generate orders according to the products in the shopping cart
function Createorder () {
Show Order Area
var Orderareadiv=document.getelementbyid ("Order_area");
The/*div object has a member object style that lets you control the style of the div by using this style object.
Display: This object or div is the element that is rendered in the document.
Available values:
Block:object is rendered as a block element.
None:object is not rendered.
.......
In this instance, use the above two values to OK, the above content from the document
*/
Manipulating styles with the properties of a Node object
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);
}
Traversing products, generating orders
for (Var x=0;x<selectedgoods.length;x++) {
* Templates for dynamically generating data
<div><!--Name property makes it easy to find-->
<input type= "checkbox" Name= "Myorder" ><span> handsome brother 20 Yuan </span>
</div>
//*/
var divnode =document.createelement ("div");
Orderareadiv.appendchild (Divnode);
var inputmyorder=document.createelement ("input");
Inputmyorder.setattribute ("Type", "checkbox");
Inputmyorder.setattribute ("name", "Myorder");
Divnode.appendchild (Inputmyorder);
var spannode=document.createelement ("span");
Randomly generating a random number from 50 to 100
var Price=math.floor (Math.random () *50+50);
Inputmyorder.value=price;
spannode.innerhtml=selectedgoods[x]+ "" +price;
Divnode.appendchild (Spannode);
Inputmyorder.appendchild (Spannode) error because span and input are sibling elements

Divnode added to OrderList
var order_list = document.getElementById ("Order_list");
Order_list.appendchild (Divnode);
}
}
/*
* Again generated orders can still choose which orders are ready to pay, and then make payment
Three choices: All options: 1, not selected: 0, 2;checkbox: The function of the optional can be multiple
*/
function Myselect (ARG) {
Getelementsbyname: Gets the collection of objects based on the value of the NAME label property.
var orders = Document.getelementsbyname ("Myorder");
In the process of writing the code incorrectly used the following sentence
getElementsByTagName: Gets a collection of objects based on the specified element name.
var orders=document.getelementsbytagname ("Myorder");
for (Var x=0;x<orders.length;x++) {
var order=orders[x];
if (arg== "1") {
Order.checked=true;
}
else if (arg== "0") {
Order.checked=false;
}
else if (arg== "2") {
order.checked=!order.checked;
}
}
}
Pay the bill, and here the amount of all the goods that pop up with the dialogue is demo
function Paymoney () {
var orders = Document.getelementsbyname ("Myorder");
Price
var sum=0;
for (Var x=0;x<orders.length;x++) {
var order = orders[x];
if (order.checked) {
Make sure you want to buy.
Sum=sum+number (Order.value);
}
}

Alert ("You see if you are going to pay" "+sum+");
}
</script>
<body>
<table>
<tr>
<td>
<!--the meaning of the Multiple property of a Select object: Sets or gets a Boolean value that indicates whether multiple items can be selected in the list-->
<select id= "Select_store" multiple= "multiple" >
<optgroup label= "Product List" ></optgroup>
</select>
</td>
<td>
<input type= "button" value= ">>" onclick= "selectgoods ();" /><br>
<input type= "button" value= "<<" onclick= "deletegoods ();" />
</td>
<td>
<select id= "select_my" multiple= "multiple" >
<optgroup label= "My Shopping Cart" ></optgroup>
</select>
</td>
<td><input type= "button" value= "Generate Order" onclick= "Createorder ();" /></td>
</tr>
</table>
<div id= "Order_area" >
<div id= "Order_list" >
<!--<div>
<input type= "checkbox" ><span> handsome 20 yuan </span>
</div>-->
</div>
<input type= "button" value= "All selected" onclick= "Myselect (' 1 ');" />
<input type= "button" value= "Do not select" onclick= "Myselect (' 0 ');" />
<input type= "button" value= "onclick=" Myselect (' 2 '); /><br>
<input type= "button" value= "Payment" onclick= "Paymoney ();" />
</div>
</body>