Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu

最新推荐文章于 2023-01-16 01:45:58 发布
最新推荐文章于 2023-01-16 01:45:58 发布
阅读量1.4k 收藏
点赞数
文章标签： javascript null 浏览器 asp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/btbtd/article/details/1325307
版权

Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu


摘要:
本文演示了使用一个 Javascript 数组 实现表单域列表框的联动显示. 
注: 数组内容由ASP生成

说明:
其实可以再N级联动, 不过那样效率得不到保障.
二级联动, 大类10, 每子类10, 数组数就是 10*10=100
三级就是 10*10*10=1000 数组
四级...
那样会让客户端浏览器CPU占用100%. 

目录:
1. 两级联动
2. 三级联动

shawl.qiu
2006-10-08
  http://blog.csdn.net/btbtd

1. 两级联动
  1. linenum
  2. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns=" http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Untitled Document</title>
  8. <script type="text/javascript">
  9. //<![CDATA[
  10.     var ar=new Array()
  11. <%
  12.     dim i, i_
  13.     dim arNum:arNum=0
  14.     dim cat, cat1
  15.     for i=0 to 9
  16.         for i_=0 to 9
  17.             if i_=0 then cat="父类别"&i else cat=null
  18.             cat1="父类别"&i&" 子类别:"&i_
  19.             response.write "ar["&arNum&"]=new Array('"&i&"','"&cat&"','"&i_&"','"&cat1&"')"&chr(13)
  20.             arNum=arNum+1
  21.         next
  22.     next
  23. %>
  24.     function showCat(){
  25.         var catItem=0
  26.         var cat1Item=0
  27.         var i
  28.             document.all.cat.length=0
  29.         for(i=0; i < ar.length;i++){
  30.             if (ar[i][1]!==""){
  31.                 document.all.cat.options[catItem]=new Option(ar[i][1],ar[i][0])
  32.                 catItem++
  33.             }
  34.             if(ar[i][0]==0){
  35.                 document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  36.                 cat1Item++
  37.             }
  38.         } //shawl.qiu script
  39.     }
  40.     window.οnlοad=showCat;
  41.     
  42.     function catChg(){
  43.         var cat1Item=0
  44.         var catSleVal=document.all.cat.value
  45.             document.all.cat1.length=0
  46.             
  47.         for (i=0;i<ar.length;i++){
  48.             if(ar[i][0]==catSleVal){
  49.                 document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  50.                 cat1Item++
  51.             }
  52.         }//shawl.qiu script
  53.     }
  54. //]]>
  55. </script>
  56. </head>
  57.  
  58. <body>
  59. <form action="" method="post" name="ubbForm" id="ubbForm">
  60.   <select name="cat" id="cat" οnchange="catChg()">
  61.   </select>
  62.   <select name="cat1" id="cat1">
  63.   </select>  
  64.   <br />
  65. </form>
  66. </body>
  67. </html>

2. 三级联动
  1. linenum
  2. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns=" http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Untitled Document</title>
  8. <script type="text/javascript">
  9. //<![CDATA[
  10.     var ar=new Array()
  11. <%
  12.     dim i, i_, i__
  13.     dim arNum:arNum=0
  14.     dim cat, cat1, cat2
  15.     for i=0 to 9
  16.         for i_=0 to 9
  17.             for i__=0 to 9
  18.                     if i_=0 and i__=0 then cat="类别"&i else cat=null
  19.                     if i__=0 then cat1="类别"&i&" 类别1: "&i_ else cat1=null
  20.                         cat2="类别"&i&" 类别1 "&i_&" 类别2: "&i__
  21.                         
  22.                     response.write "ar["&arNum&"]=new Array('"&i&i&"','"&cat&"','"&i_&i_&"','"&cat1&"','"&i__&i__&"','"&cat2&"')"&chr(13)
  23.                     arNum=arNum+1
  24.             next
  25.         next
  26.     next
  27. %>
  28.     function showCat(){
  29.         var catItem=0
  30.         var cat1Item=0
  31.         var cat2Item=0
  32.         var i
  33.             document.all.cat.length=0
  34.             document.all.cat1.length=0
  35.             document.all.cat2.length=0
  36.         for(i=0; i < ar.length;i++){
  37.             if (ar[i][1]!==""){
  38.                 document.all.cat.options[catItem]=new Option(ar[i][1],ar[i][0])
  39.                 catItem++
  40.             }
  41.             if((ar[i][0]==0)&&(ar[i][3]!=="")){
  42.                 document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  43.                 cat1Item++
  44.             }
  45.             if((ar[i][0]==0)&&(ar[i][2]==0)){
  46.                 document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
  47.                 cat2Item++
  48.             }
  49.         } //shawl.qiu script
  50.     }
  51.     window.οnlοad=showCat;
  52.     
  53.     function catChg(chgLevel){
  54.         var cat1Item=0
  55.         var cat2Item=0
  56.         var catSleVal=document.all.cat.value
  57.         var cat1SleVal=document.all.cat1.value
  58.         
  59.         if (chgLevel==0){ document.all.cat1.length=0 }
  60.             document.all.cat2.length=0
  61.         for (i=0;i<ar.length;i++){
  62.             if (chgLevel==0){
  63.                 if((ar[i][0]==catSleVal)&&(ar[i][3]!=="")){
  64.                     document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  65.                     cat1Item++
  66.                 }
  67.                 if((ar[i][0]==catSleVal)&&(ar[i][4]==0)){
  68.                     document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
  69.                     cat2Item++
  70.                 }
  71.             } else if (chgLevel==1){
  72.                 if((ar[i][0]==catSleVal)&&(ar[i][2]==cat1SleVal)){
  73.                     document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
  74.                     cat2Item++
  75.                 }
  76.             } //shawl.qiu script
  77.         } 
  78.     }
  79. //]]>
  80. </script>
  81. </head>
  82.  
  83. <body>
  84. <form action="" method="post" name="ubbForm" id="ubbForm">
  85.   <select name="cat" id="cat" οnchange="catChg(0)">
  86.   </select>
  87.   <select name="cat1" id="cat1" οnchange="catChg(1)">
  88.   </select>  
  89.   <select name="cat2" id="cat2">
  90.   </select>  
  91.   <br />
  92. </form>
  93. </body>
  94. </html>

btbtd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS实现二级、三级、四级联动效果。详细
weixin_47703646的博客
07-09 3151
流程目录 介绍 思路 实现 页面初始化效果 编写JS文件 总结 需要注意的问题 结束 介绍 做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况，例如在网上买东西的时候，就会选择收货地址，以及在填写家庭信息的时候，都会用到常见的省，市，区三级联动。 思路 页面加载的时候显示的是默认的初始省市县，通过选择不同的省和市，则该省对应的市和县显示为默认。 当点击省份列表中的某一项，此时触发省份下拉框的onchange事...
JavaScript 三级联动的实现
嘤其鸣矣，求其友声
01-15 825
最近项目用用到了“添加商品”，商品有所属商品、一级类目、二级类目等，从而构成了三个级别，为了提升用户体验，做了如下的三级联动准备工作： 一、获取后台数据，public class MenuJSON { public static void GetMenuJsonData(HttpServletRequest request) { User user = (User) requ
Vue 实现数组四级联动
code小生
09-01 854
前言最近项目上有个需求就是做下拉列表的四级联动，使用的是vuejs + elementui，使用数组存储对象的形式做为列表渲染到页面上的数据，但是在下拉列表联动的时候发现几个问题，现在记录...
js实现表单联动
weixin_30847865的博客
01-09 200
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...
JS案例：省市区三级联动
最新发布
pe11223的博客
01-16 255
JS案例：省市区三级联动
js的2级联动的一种方法！
一张白纸......
10-14 2557
 var arrlist1=new Array(3)arrlist1[0]=new Array("111","111的只");arrlist1[1]=new Array("111","111111");arrlist1[2]=new Array("111","11111");var arrlist2=new Array(3)arrlist2[0]=new Array("22222","2222")
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
10-31
本文将介绍一系列由shawl.qiu提供的简单而高效的函数，用于判断JavaScript中的各种基本数据类型。 #### 二、判断是否为数组类型 在JavaScript中，数组是一种常用的数据结构，用于存储多个值。下面是一个简单的函数...
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
10-31
本文由shawl.qiu撰写，主要介绍了如何使用CSS技术来创建适用于多种浏览器（如Opera、Firefox、IE）的弹出式菜单。文章重点讲解了利用CSS属性（如`display`和`:hover`）以及必要的JavaScript代码来实现不同布局的菜单...
js prototype 格式化数字 By shawl.qiu
10-30
### JavaScript Prototype 格式化数字方法详解 #### 一、背景与动机 在日常的Web开发工作中，我们经常需要处理各种各样的数据，其中数字的处理尤为重要。在JavaScript中，虽然提供了丰富的内置对象和方法来操作...
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
10-31
这篇文章由shawl.qiu撰写，主要探讨了这两种语言在服务端实现的一些共同特性，包括遍历集合/对象、转换变量值为变量并赋值以及动态包含文件的方法。 1. **遍历集合/对象** - **VBScript**：在VBScript中，可以使用...
JavaScript实现项目列表的增删移动
博客来自passerby&
12-08 4106
JavaScript实现项目列表的增删移动 在前面我们已经学习了html和css，相信大家对此应该有了相当的理解 想要完成此项任务我们需要准备以下知识点： Find()定义和用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 当数组中的元素在测试条件时返回 true 时
jsp 二级联动下拉表单框数据回显_047 Ajax 三级联动与搜索框提示语
weixin_39707478的博客
11-27 162
12 Ajax 案例之省市区三级联动 三级联动定义：页面中有三个下拉框选项，分别为 省、市、县下拉框，选择对应的框，显示对应的省、市、县信息。 技术分析：ajax技术+jsp+servlet+jdbc 需求分析（思路）： ​ 1、 创建页面：页面中有三个下拉框，分别为省、市、县区 ​ 2、页面加载成功发起 ajax 请求，请求省的信息，并将响应的经过填充到省下拉框中 ​ 3、选择省信息，请求对应的...
js实现联动的选项框 以及点击前后效果实现
s89897的博客
11-14 374
原生js实现联动的选项框 以及点击前后效果实现
jsp实现表格联动
sdizoea的博客
07-06 1501
导读：jsp和ajax实现表格联动（例如：点击省份，就会出现相应的市区） 实现效果图： 代码： html页面： 请选择产品类型 产品类型： 请选择 产品： 请选择 js代码：     $(function(){    $.ajax({    url: window.BIZCTX_PA
省市二级及联动（省市对应数组）
客留时空的博客
12-11 3170
html <select name="province" id="pro"></select> <select name="city" id="city"></select> address.js $(function() { function pro_i...
多级联动系列——数组二级联动
php丶小菜鸟
05-18 2185
好久没写博客了，前段时间因为搬家，目前住的地方没有网络，就没有写博客了。找到了一个可以蹭网的地方给力。OK，废话不多说，这一段时间我准备 把 一些项目中需要的功能收集整理一下。便于复习和查找。 先写一个简单的二级联动，利用创建数组的方式。稍后我会更新其他的方式创建多级联动。 看看代码吧。 二级联动 //创建二级分类数组 var arr=[['请选择'],['请选
jQuery 中国省市两级联动(实用)
yimiyangguang的专栏
04-12 3378
jQuery 中国省市两级联动(实用) 省市两级联动选择 select { width: 135px; } fieldset dl dd { float: left; marg
纯CSS弹出菜单实现详解
"编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu" 在网页设计中，创建交互式用户体验的一个重要元素是弹出菜单。本文由 shawl.qiu 提供，详细阐述了如何利用纯 CSS 实现适用于 Opera、Firefox 和 IE 浏览器的弹出...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值