老鱼网一个爱分享的小站!分享一些站长相关知识资源文章!
云服务器推荐

首页好文推荐建站教程正文

网站二级、三级联动选择制作方法(附JS Select联动代码 )

老鱼网1个月前27

什么是网站二级、三级联动选择

二级、三级联动选择简单的说就是一层一层的选择,例如一些商城网站里,用户在选择衣服时,先选择品牌,再选择这个品牌下的衣服款饰,最后再选择衣服颜色,这样一层一层的进行选择,最后筛选出自己需要的物品。

网站二级三级联动选择也经常用于省--市---县等功能方面。如下图:

网站二级、三级联动选择制作方法(附JS Select联动代码 )

网站二级联动制作代码

<select id="city">
<option value="">请选择</option>
<option value="HB">湖北</option>
<option value="JS">江苏</option>
<option value="JX">江西</option>
</select>
<select id="area">
<option>请选择</option>
</select>

<script type="text/javascript">
var city=document.getElementById("city");//获取第一个下拉框
city.onclick=function(){ // 给第一个下拉框绑定点击事件
var val=city.value; //获取第一个下拉框中option的值
switch(val){ //利用switch语句给第二个下拉框插入值
case 'HB':
document.getElementById("area").innerHTML="<option>武汉市</option><option>荆州市</option><option>孝感市</option>";
break;
case "JS":
document.getElementById("area").innerHTML="<option>南京市</option><option>苏州市</option><option>南通市</option>";
break;
case "JX":
document.getElementById("area").innerHTML="<option>南昌市</option><option>赣江市</option><option>九江市</option>";
break;
// default:
// alert("error");

}
}
</script>

网站三级联动选择制作代码

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
/*使用 HTML DOM 的方式实现联动菜单*/
var categories=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'正装'},
{"id":102,"name":'T恤'},
{"id":103,"name":'裤衩'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'裤子',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'九分裤'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'帽子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
];
function createSel(cts){//传入包含一组类别对象的数组
//创建select元素,保存在变量sel中
var sel=document.createElement("select");
//向sel添加一个新option,设置内容为"-请选择-",值为-1
sel.add(new Option("-请选择-",-1));
//遍历cts中的每个类别对象
for(var i=0;i<cts.length;i++){
//向sel中添加一个新option,设置内容为当前类别的内容,设置值为当前类别的id
sel.add(new Option(cts[i].name,cts[i].id));
}//(遍历结束)

//cts:[{男装,},{女装,},{童装,children:[{sub1},...]
// i-1
sel.onchange=function(){//this->sel
//获得当前sel选中项的下标,保存在变量i中
var i=this.selectedIndex;
//获得cts中下标为i-1位置的子类型对象,保存在cate中
var cate=cts[i-1];
//反复删除category下的最后一个子节点,直到category的最后一个子节点就是当前sel时,退出循环
while(category.lastChild!=this){
category.removeChild(category.lastChild);
}
if(cate.children){//如果cate有children属性
//调用createSel,传入cate的children数组作为参数
createSel(cate.children);
}
}

//将sel追加到id为category的元素中
category.appendChild(sel);
}
window.onload=function(){
createSel(categories);
}
</script>
</head>
<body>
<div id="category"></div>
</body>
</html>


上一篇:为什么浏览器打开网站显示“不安全”

下一篇:WordPress做站群方法


转载声明:本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 侵删请致信E-mail:wwwlaoyuwang#126.com(#=@)

云服务器推荐