一、二级联动

<body onload="fa()"><label>省份:</label><select id="sa" onchange="fb()"><option >请选择省份</option></select><label>城市:</label><select id="sb"><option>请选择城市</option></select></body><script type="text/javascript">var cityList = new Array();cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];cityList['江苏省'] = ['南京市','苏州市','无锡市'];cityList['浙江省'] = ['杭州市','宁波市','温州市'];cityList['四川省'] = ['四川省','成都市'];cityList['海南省'] = ['海口市'];cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];cityList['山东省'] = ['济南市','青岛市','烟台市'];cityList['江西省'] = ['江西省','南昌市'];cityList['广西省'] = ['柳州市','南宁市'];cityList['安徽省'] = ['安徽省','合肥市'];cityList['河北省'] = ['邯郸市','石家庄市'];cityList['河南省'] = ['郑州市','洛阳市'];cityList['湖北省'] = ['武汉市','宜昌市'];cityList['湖南省'] = ['湖南省','长沙市'];cityList['陕西省'] = ['陕西省','西安市'];cityList['山西省'] = ['山西省','太原市'];cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];cityList['其他'] = ['其他'];/* 返回编号方法*/function $(id){return document.getElementById(id);}/* 绑定城市*/function fa(){/* 获取城市编号*/var sf=$("sa");/* 遍历数组 */for(i in cityList){/* 加到城市里面 */sf.add(new Option(i));}}/* 绑定省份*/function fb(){/* 获取城市编号*/var cs= $("sb");/* 清空上例选择的值 */cs.length=0;cs.add(new Option("请选择城市"));/* 获取省份的值*/var sf=$("sa").value;/* 便利数组 */for(i in cityList){if(sf==i){for(j in cityList[i]){cs.add(new Option(cityList[i][j]));}}}}

二、购物车案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>淘宝购物车页面</title><link href="css/myCart.css" type="text/css" rel="stylesheet" /></head><body onload="fb()"><div id="header"><img src="data:images/taobao_logo.gif" alt="logo" /></div><div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div><div id="navlist"><ul><li class="navlist_red_left"></li><li class="navlist_red">1. 查看购物车</li><li class="navlist_red_arrow"></li><li class="navlist_gray">2. 确认订单信息</li><li class="navlist_gray_arrow"></li><li class="navlist_gray">3. 付款到支付宝</li><li class="navlist_gray_arrow"></li><li class="navlist_gray">4. 确认收货</li><li class="navlist_gray_arrow"></li><li class="navlist_gray">5. 评价</li><li class="navlist_gray_right"></li></ul></div><div id="content"><table width="100%" border="0" cellspacing="0px" cellpadding="0" id="shopping"><form action="" method="post" name="myform"><tr><td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="fa()" />全选</td><td class="title_2" colspan="2">店铺宝贝</td><td class="title_3">获积分</td><td class="title_4">单价（元）</td><td class="title_5">数量</td><td class="title_6">小计（元）</td><td class="title_7">操作</td></tr><tr><td colspan="8" class="line"></td></tr><tr><td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="data:images/taobao_relation.jpg"alt="relation" /></td></tr><tr id="product1"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="data:images/taobao_cart_01.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />颜色：棕色 尺码：37<br />保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /></td><td class="cart_td_4">5</td><td class="cart_td_5">138.00</td><td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum(this,'num_1','minus')" class="hand" /><input id="num_1" type="text" value="1" class="num_input" readonly="readonly" /> <img src="data:images/taobao_adding.jpg"alt="add" onclick="changeNum(this,'num_1','add')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td></tr><tr><td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="data:images/taobao_relation.jpg"alt="relation" /></td></tr><tr id="product2"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="data:images/taobao_cart_02.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /> <img src="data:images/taobao_icon_02.jpg" alt="icon" /></td><td class="cart_td_4">12</td><td class="cart_td_5">265.00</td><td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum(this,'num_2','minus')" class="hand" /><input id="num_2" type="text" value="1" class="num_input" readonly="readonly" /> <img src="data:images/taobao_adding.jpg"alt="add" onclick="changeNum(this,'num_2','add')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td></tr><tr><td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="data:images/taobao_relation.jpg"alt="relation" /></td></tr><tr id="product3"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="data:images/taobao_cart_03.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br />保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /> <img src="data:images/taobao_icon_02.jpg" alt="icon" /></td><td class="cart_td_4">3</td><td class="cart_td_5">85.00</td><td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum(this,'num_3','minus')" class="hand" /><input id="num_3" type="text" value="1" class="num_input" readonly="readonly" /> <img src="data:images/taobao_adding.jpg"alt="add" onclick="changeNum(this,'num_3','add')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td></tr><tr><td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="data:images/taobao_relation.jpg"alt="relation" /></td></tr><tr id="product4"><td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td><td class="cart_td_2"><img src="data:images/taobao_cart_04.jpg" alt="shopping" /></td><td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /></td><td class="cart_td_4">12</td><td class="cart_td_5">12.00</td><td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum(this,'num_4','minus')" class="hand" /><input id="num_4" type="text" value="2" class="num_input" readonly="readonly" /> <img src="data:images/taobao_adding.jpg"alt="add" onclick="changeNum(this,'num_4','add')" class="hand" /></td><td class="cart_td_7"></td><td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td></tr><tr><td colspan="3"><a href="javascript:deleteSelectRow()"><img src="data:images/taobao_del.jpg" alt="delete" /></a></td><td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />可获积分 <label class="yellow" id="integral"></label> 点<br /><input name=" " type="image" src="data:images/taobao_subtn.jpg" /></td></tr></form></table></div></body><script type="text/javascript" src="js/myCart.js"></script>
</html>

js-09二级联动购物车案例相关推荐

二级省市mysql_省市二级联动小案例讲解
在网页开发过程中,选择省市的时候,省市之间有关联,这是一个小小的二级联动案例 ,运用到HTML.css.php.js以及 AJAX的异步请求首先建立city.php和province.php文件和c ...
JS省市二级联动菜单,sky整理收集。
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
使用js实现二级联动表
我们在做项目的时候,经常会遇到选择省市级.选择单位部门等功能,也就是我们熟悉的二级联动问题. 之前没有接触过二级联动,所以感觉二级联动会比较麻烦,实现起来很困难.但是自己写过一个二级联动之后,发现这东 ...
前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动
二级联动菜单 select 对象一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
android二级联动购物车,Android实现二级购物车的全选加反选、总价功能
本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...
js省市二级联动；)
HTML <form><select id="province"><option value="请选择">请选择</o ...
js select二级联动
 <select id="s1" onChange="move()" name="deducted_divis ...
php+js实现二级联动下拉菜单(结合mysql数据库)_JS二级联动下拉列表 PHP实现
var optionArray = new Array(); $grade_sql = "select distinct grade_id from subjects"; $gra ...
php+js实现二级联动下拉菜单(结合mysql数据库)_jQuery结合PHP+MySQL实现二级联动下拉列表[实例]...
实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给 ...

js-09二级联动购物车案例

js-09二级联动&&购物车案例

一、二级联动

二、购物车案例

js-09二级联动购物车案例相关推荐

最新文章

热门文章