JavaScript购物车联动与二级下拉联动实现详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoji1346790/article/details/124156829

js–购物车&二级联动

1.二级联动

function $(id){
		return document.getElementById(id);
	}
	function bangding(){
		//获取省份下拉框
		var sf = $("sf");
		//遍历
		for(i in cityList){
			sf.add(new Option(i));
		}
	}
	function bangdingcs(){
		//获取城市下拉框
		var cs = $("cs");
		//添加之前先清空数据
		cs.length = 0;
		//获取所选择的省份下拉框的值
		var sf = $("sf").value;
		//开始绑定城市数据
		for(i in cityList){
			if(sf == i){
				//给城市下拉框添加数据
				for(j in cityList[i]){
				cs.add(new Option(cityList[i][j]));
				}
			}
		}
	}

	</script>
</head>
<body onload="bangding()">
	<label>省份:</label>
	<select id="sf" onchange="bangdingcs()">
		<option>请选择</option>
	</select>
	<label>城市:</label>
	<select id="cs">
		<option>请选择</option>
	</select>
</body>

2.购物车(js代码)

function $(id) {
	return document.getElementById(id);
	}
	// 全选
	function selectAll() {
	// 获取全选复选框
	var allCheckBox = $("allCheckBox");
	// 获取其它复选框
	var cs = document.getElementsByName("cartCheckBox");
	for (i in cs) {
		cs[i].checked = allCheckBox.checked;
	}
}

	// 删除
	function deleteRow(rid) {
	// 获取要操作的表格对象
	var shopping = $("shopping");
	// 获取要删除的行对象
	var myRow = $(rid);
	// 获取要删除的行的下标
	var myRindex = myRow.rowIndex;
	// 通过下标删除行
	shopping.deleteRow(myRindex);
	shopping.deleteRow(myRindex - 1);
	myload()
	}
	// 删除所选功能
	function deleteSelectRow() {
	// 获取其它复选框
	var cs = document.getElementsByName("cartCheckBox");
	// 遍历所有复选框
	for (var i = 0; i < cs.length; i++) {
		// 筛选出被选中的复选框
		if (cs[i].checked == true) {
			// 获取复选框的value值
			var myValue = cs[i].value;
			// 调用删除复选框的方法
			deleteRow(myValue);
			i--;
		}
	}
	myload();
	}
	// 加减功能
	function changeNum(id,type) {
	//通过行ID获取当前所操作的行
	var row = $(id);
	//获取到加减图片所在的单元格
	var td = row.cells[5];
	//获取当前单元格里面的第二个子节点
	var na = ns[1];
	//获取文本框当前的值
	var va = na.value;
	//判断点击的事加号还是减号
	if(type == 'minus'){
		if(va <= 1){
			alert('数量最少为1')；
			return false;
		}
		va --;
		na.value = va;
	}else{
		va ++;
		na.value = va;
	}
	// 价格小计
	// 获取当前操作的行对象
	var myRow = object.parentNode.parentNode;
	// 获取价格
	var myPrice = myRow.cells[4].innerHTML;
	// 计算价格小计
	var countPrice = inputValue * myPrice;
	// 把价格小计赋给价格小计单元格
	myRow.cells[6].innerHTML = countPrice;
	myload();
}