零基础学做网站培训介绍

当前位置:

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

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

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

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

网站二级、三级联动选择制作方法(附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>

相关阅读:

全国省市二级联动下拉菜单JS代码

WordPress 三级联动多条件筛选功能制作

如何制作网站上全国城市二级联动选择功能

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 自己用代码写的一个网站,莫见笑,这是学习了张老师的代码课程后,自己先画了一个图,然后再用PS切片,再使用DIV和CSS写的一个网站,第一次写,写的不
  • 在一些门户网站上,由于项目众多,不可能全部将这些项目显示在主导航上,就可以通过二级菜单,三级导航,甚至四级导航来显示。如何在自己做网站
  • 什么是网站二级、三级联动选择二级、三级联动选择简单的说就是一层一层的选择,例如一些商城网站里,用户在选择衣服时,先选择品牌,再选择这个品
  • 今天介绍一个Wordpress 多条件联动筛选功能制作案例,这也是学做网站论坛为一个网站客户做的一个功能。就是Wordpress 多条件联动筛选功能。如果你正想
  • 什么是全国城市二级联动选择功能?全国城市二级联动选择功能在很多有全国各地城市分站的网站上很常见,用户可以选择自己想要到达的城市进入对应城
  • 这篇文章为大家详细介绍了基于javascript实现全国省市二级联动下拉菜单,文中示例代码介绍的特别详细,具有一定的参考价值,感兴趣的小伙伴们可以参考
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • 问:购买虚拟空间Windows和Linux怎么选择啊!那个好些!答:根据网站程序的不同选择不同的服务器空间,ASP---WINDOWS  php---LINUX。通常我们在建
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设
  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实