全国省市县三级联动菜单特效

9个月前 (03-04 17:09)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

实用的全国省市县三级联动下拉菜单效果,网站常用省级联动菜单js特效,选择前面省份后自动切换后面城市。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>全国省市县三级联动菜单特效_武鸣人</title>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件,请刷新页面后看效果!<br />
<div id="areaSelect" style="margin-left:100px">
<select><option>北京市</option></select>
<select><option>县</option></select>
<select><option>密云县</option></select>
</div>
<script type="text/javascript" src="/img/20240304_www_wuming_ren_area.js" charset="gb2312"></script>
<script type="text/javascript">
//初始数据并绑定事件
function areaSelect(node){
var node = document.getElementById(node)
var selTag = node.getElementsByTagName('select'),arg=[];
for(var i=0,j; j=selTag[i++];){
arg.push(j.options[j.selectedIndex].text);
j.rel = i;
j.onchange = function()
{eventFun.call(area,this.rel,this.options[this.selectedIndex].text,selTag);}
}
var area = new Areasel(selTag,arg[0]||'',arg[1]||'',arg[2]||'');
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
//事件处理
function eventFun(a,name,tag){
switch(a){
case 1: this.area.getCity(name);
break;
case 2: this.area.getDistrict(name);
break;
case 3: return;
}this.setHTML(a,tag)
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
//处理数据生成select列表对象
var Areasel = function(tag,p,c,d){
this.area = new getArea(p,c,d);
this.setHTML(0,tag);
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
Areasel.prototype.setHTML = function(a,tag){
var name = [this.area.pName,this.area.cName,this.area.dName];
var dat = [this.area.pDat,this.area.cDat,this.area.dDat];
for(var i=a; i<tag.length; i++){
tag[i].options.length = 0;
tag[i].add(new Option(this.area.text[i]));
this.createHTML(name[i],dat[i],tag[i]);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
Areasel.prototype.createHTML = function(name,arr,tag){
var temp;
for(var i=0,j; j=arr[i++];){
temp = new Option(j);
if(j == name) temp.selected = true;
tag.add(temp);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
//实例化
new areaSelect('areaSelect')
</script>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/170.html

回帖

全国省市县三级联动菜单特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息