两级联动菜单

最新推荐文章于 2019-08-21 16:18:50 发布
最新推荐文章于 2019-08-21 16:18:50 发布
阅读量967 收藏 1
点赞数
分类专栏： javscript 文章标签： null javascript menu 电子商务 function 旅游
 两级联动菜单 与 多级联动菜单

两级联动菜单

----------------------------------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript" type="text/javascript">
<!--
var province_ar=new Array("","学历文凭|旅游管理,工商企业管理,文秘,金融,国际贸易,会计,英语,计算机应用,法律,艺术设计","成人高教|工商企业管理,国际经济与贸易,外贸英语,计算机应用与管理,艺术设计","高教自考|饭店管理,工商企业管理,中英合作商务管理,保险,国际贸易,英语,电子商务,计算机及应用,法律,广告");

function show_province()
{
var pro_tmp=document.all.province;
for (m=pro_tmp.options.length-1;m>0;m--)
pro_tmp.options[m]=null;

for(i=0;i<province_ar.length;i++)
{
if(province_ar[i]!="")
{
tmp=province_ar[i].split("|");
pro_tmp.options[i]=new Option(tmp[0],tmp[0]);
}
}
}
function show_city(sc)
{
var temp=document.all.city;
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null;

if(province_ar[sc]!="")
{
tmp=province_ar[sc].split("|");
tmp=tmp[1];
tmp=tmp.split(",");
for(i=0;i<tmp.length;i++)
{
temp.options[i]=new Option(tmp[i],tmp[i]);
}
}
}
setTimeout("show_province();",20);//第一个搜索中省份城市对应
-->
</script>
</HEAD>

<BODY>
<FORM name="testform" id="testform">
<select id=province 
     οnchange=show_city(this.options.selectedIndex)>
<OPTION value="" selected>请选择类别</option>
</select>
<select id=city>
   <OPTION value="" selected>请选择专业</OPTION>
</select>
</FORM>
</BODY>
</HTML>

----------------------------------------------------------------------------------------------

 

多级联动菜单

----------------------------------------------------------------------------------------------


<BODY>
<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME="s2"></SELECT>
<SELECT NAME="s3"></SELECT>
<SELECT NAME="s4"></SELECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//选择框的名字
selector = [ "s1", "s2", "s3", "s4" ];
//选择项: "名字", "值", 子选择
menu = [
"地球","1",
[
"中国","86",
 [
 "北京","BJ",
  [
  "--","1",null
  ],
 "四川","SC",
  [
  "成都","28",null,
  "乐山","",null,
  "攀枝花","",null,
  "自贡","",null,
  "德阳","",null,
  "绵阳","",null
  ]
 ],
"米国","1",
 [
 "加利福尼亚","CA",
  [
  "旧金山","1",null,
  "洛杉矶","2",null
  ],
 "华盛顿","WA",
  [
  "西雅图","seattle",null
  ]
 ]
],
"火星","2",
[
"大峡谷","86",
 [
 "小山丘","BJ",
  [
  "A地区","28",null,
  "B地区","",null,
  "C地区","",null
  ]
 ]
]
];

function wizz(level)
{
if( level == 0 )
 a = menu;
else
{
 str = "menu";
 for( i=0; i<level; i++ )
  str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2)  + "]";
 a = eval(str);
}
if( a == null ) return;
s = document.all[selector[level]];
i = s.length;
while( i > 0 ) s.options[--i] = null;
while( i < Math.floor(a.length/3) )
 s.options[i] = Option( a[i*3], a[i++*3+1] );
s.onchange = Function("wizz(" + (level+1) + ")");
wizz(level+1);
}
wizz(0);
//-->
</SCRIPT>
</BODY>
</HTML>

----------------------------------------------------------------------------------------------



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=67568

addwing
关注
专栏目录
2级联动
Mr_Cao_的博客
05-20 313
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user
十二个月份的二级联动菜单
fighterna的博客
11-14 938
常常需要通过弹出菜单向用户提供选择输入的机会，而且希望根据用户在另一个弹出菜单中的选择，改变一个或多个弹出菜单的内容。现在我们要用两个弹出菜单，一个表示月份，另一个表示该月份的天数，自动填充第二个弹出菜单。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
省市2级联动菜单（完整数据，绝对好用）
01-18
省市2级联动菜单（完整数据，绝对好用），不刷新页面，拿来就用！
两级联动菜单 与 多级联动菜单
[年少莽撞]
08-06 2190
两级联动菜单 ----------------------------------------------------------------------------------------------  New Document  var province_ar=new Array("","学历文凭|旅游管理,工商企业管理,文秘,金融,国际贸易,会计,英语,计算机应用,法律
两级联动菜单实例
PHP&网页设计
06-29 1613
两级联动菜单实例 环境保护局 首页 通知 任务 科室 办公室 综合科 管理科 环评科 监察队 监测站 排放站
JS练习：两级联动
weixin_33834628的博客
10-18 198
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两级联动</title> <script> //准备数据 var provinces = [ ...
两级联动菜单两级联动菜单
04-01
两级联动菜单两级联动菜两级联动两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单两级联动菜单菜单单
asp+access数据库+ajax实现两级联动菜单[借鉴].pdf
10-11
asp+access数据库+ajax实现两级联动菜单[借鉴].pdf
java实现的二级联动菜单效果
09-01
在Java Web开发中，二级联动菜单是一种常见的交互设计，它允许用户通过选择一级菜单来触发二级菜单的内容更新，常用于地区选择、分类筛选等场景。本篇将详细讲解如何使用Java实现这种效果。 首先，二级联动菜单的...
通用3级联动菜单特效代码
03-20
通过这两个链接，用户可以获取到源代码的最新版本，或者找到更多关于此3级联动菜单特效的使用技巧和开发背景。 实现3级联动菜单通常涉及以下技术： 1. HTML：创建基础的菜单结构，使用`<ul>`和`<li>`元素来表示菜单...
功能 两级联动菜单
iteye_2837的博客
08-26 145
两级联动菜单 body{margin: 0; padding: 0;position: relative;} select{ /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none;...
不错的两级联动菜单
程序人生
07-24 1953
001002function change(){switch(document.all.aa.options[document.all.aa.selectedIndex].text){case "001":bb.options[0]=new Option("text1","value",false,false)bb.options[1]=new Option("text2","value",fal
js基础学习之两级联动
S_T_F666的博客
08-30 458
    本来最近在学习ajax,学着学着学到html——js——ajax,踏踏实实学习真好，布置于在做项目的时候，看不懂这个，看不懂那个，今天就跟大家谈谈这个小demo，两级联动，其实三级联动也好做，有空再做吧，自己以后要是用到了，也能看看。当然现在有好多的人或者公司已经这个玩意，写了一遍有一遍，完善了一遍又一遍，学习或者以后工作，总不能拿别人的就用，处理问题，也搞不定那个最烦人，还是自己了解一点...
jquery省份两级联动
xueweiwei0617的博客
08-16 432
省份两级联动<!DOCTYPE> <html> <head> <title> New Document </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="description" content=""/> <script type="tex
js中的二级联动技术的实现
ll_superman的博客
05-06 6535
在web开发中我们经常会遇到页面的一个二级联动技术，二级联动字面解释就是说我在选择一级select不同的option，下面的二级option的属性值在进行相应的变动。        下面我先简述一下其中的原理，最后我们再贴代码。        首先一级和二级是两个标签。一级标签的发生变化的时候，二级的option就会发生变化，我们首先做的是在一级标签中加入       “onchange()”
原生js实现二级联动菜单
10-15
在网页开发中，二级联动菜单是一种常见的交互设计，它通常用于分类选择，如地区、商品类别等。这种菜单的特性是，当用户在第一级菜单中选择一个选项时，第二级菜单会根据所选的选项动态更新其内容。本篇文章将详细...
轮子选择器（实现两级联动，城市选择等
07-22
参考博客：http://blog.csdn.net/u010963246/article/details/47002857
2级联动下拉列表（无刷新）
09-19
列表 可以动态读取数据
Ajax两级联动效果以及具体代码
CAT
03-24 390
刚接触Java的同学们肯定会先接触前台的编码，我还记得我在大学时，感觉两级联动效果真的是很难很难，后来大三时，我的技术逐渐成熟，基础也扎实了，写两级联动也并不会太烧脑了，嘿嘿，接下来我将把我之前做的一个平台中设计两级联动的代码以及效果展示给大家，以供参考，如果有更简便的方法，欢迎留言给我。1.jsp页面中的前台显示，指定Id名称。2.当触发vipid的change事件后，将请求数据发送给后台，后台...
两级联动实现的三种方法
qq_38409767的博客
08-21 2310
方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值