`

js三级滚动条

HTML 
阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<script language="javascript">
var areaArray = new Array();
areaArray[areaArray.length]=new Array("1","杭州");
areaArray[areaArray.length]=new Array("2","湖州");
areaArray[areaArray.length]=new Array("3","温州");

var townArray = new Array();
townArray[townArray.length]=new Array("1","1","上城区");
townArray[townArray.length]=new Array("1","2","下城区");
townArray[townArray.length]=new Array("2","3","南浔镇");
townArray[townArray.length]=new Array("2","4","菱湖镇");
townArray[townArray.length]=new Array("3","5","乐清");
townArray[townArray.length]=new Array("3","6","苍南");   

function setTown(obj1ID,obj2ID){
        var objArea = document.getElementById(obj1ID);
        var objTown = document.getElementById(obj2ID);
        var i;
        var itemArray = null;
        if(objArea.value.length > 0){
             itemArray = new Array();
             for(i=0; i<townArray.length; i++){
                if(townArray[i][0] == objArea.value){
                    itemArray[itemArray.length] = new Array(townArray[i][1],townArray[i][2]);
                }
             }
        }
        for(i=objTown.options.length; i>=0; i--){
        objTown.options[i] = null;
        }
        objTown.options[0] = new Option("请选地区");
        objTown.options[0].value = "";
        if(itemArray != null){
        for(i=0; i<itemArray.length; i++){
            objTown.options[i+1] = new Option(itemArray[i][1]);
            if(itemArray[i][0] != null){
               objTown.options[i].value = itemArray[i][0];
            }
        }
        }
   }

/** ------------------------------------------------------------------------------------------------ */  
   var oneArray = new Array();
oneArray[oneArray.length]=new Array("1","1");
oneArray[oneArray.length]=new Array("2","2");
oneArray[oneArray.length]=new Array("3","3");

var twoArray = new Array();
twoArray[twoArray.length]=new Array("1","11","11");
twoArray[twoArray.length]=new Array("1","12","12");
twoArray[twoArray.length]=new Array("1","13","13");
twoArray[twoArray.length]=new Array("2","21","21");
twoArray[twoArray.length]=new Array("2","22","22");
twoArray[twoArray.length]=new Array("3","31","31");
twoArray[twoArray.length]=new Array("3","32","32");
twoArray[twoArray.length]=new Array("3","33","33");

var threeArray = new Array();
threeArray[threeArray.length]=new Array("11","111","111");
threeArray[threeArray.length]=new Array("11","112","112");
threeArray[threeArray.length]=new Array("11","113","113");
threeArray[threeArray.length]=new Array("12","121","121");
threeArray[threeArray.length]=new Array("12","122","122");
threeArray[threeArray.length]=new Array("13","131","131");
threeArray[threeArray.length]=new Array("13","132","132");
threeArray[threeArray.length]=new Array("21","211","211");
threeArray[threeArray.length]=new Array("21","212","212");
threeArray[threeArray.length]=new Array("22","221","221");
threeArray[threeArray.length]=new Array("22","222","222");
threeArray[threeArray.length]=new Array("31","311","311");
threeArray[threeArray.length]=new Array("31","312","312");
threeArray[threeArray.length]=new Array("32","321","321");
threeArray[threeArray.length]=new Array("32","322","322");
threeArray[threeArray.length]=new Array("33","331","331");
threeArray[threeArray.length]=new Array("33","332","332");

function setTwo(obj1ID,obj2ID,obj3ID){
var objOne = document.getElementById(obj1ID);
var objTwo = document.getElementById(obj2ID);
var objThree = document.getElementById(obj3ID);
var i;
var twoArrays = null;
if(objOne.value.length > 0){
twoArrays = new Array();
for(i=0;i<twoArray.length;i++){
        if(twoArray[i][0]==objOne.value){
            twoArrays[twoArrays.length]=new Array(twoArray[i][1],twoArray[i][2]);
        }
    }
}
for(i=objTwo.options.length; i>=0; i--){
objTwo.options[i] = null;
}
objTwo.options[0] = new Option("请选择");
objTwo.options[0].value = "";
for(i=objThree.options.length; i>=0; i--){
objThree.options[i] = null;
}
objThree.options[0] = new Option("请选择");
objThree.options[0].value = "";
if(twoArrays != null){
for(i=0; i<twoArrays.length; i++){
    objTwo.options[i+1] = new Option(twoArrays[i][1]);
     if(twoArrays[i][0] != null){
      objTwo.options[i+1].value = twoArrays[i][0];
    }
}
}
}

function setThree(obj2ID,obj3ID){
var objTwo = document.getElementById(obj2ID);
var objThree = document.getElementById(obj3ID);
var i;
var threeArrays = null;
if(objTwo.value.length > 0){
threeArrays = new Array();
   for(i=0; i<threeArray.length; i++){
    if(threeArray[i][0] == objTwo.value){
      threeArrays[threeArrays.length] = new Array(threeArray[i][1],threeArray[i][2]);
        }
}
}
for(i=objThree.options.length; i>=0; i--){
objThree.options[i] = null;
}
objThree.options[0] = new Option("请选择");
objThree.options[0].value = "";
if(threeArrays != null){
   for(i=0; i<threeArrays.length; i++){
    objThree.options[i+1] = new Option(threeArrays[i][1]);
if(threeArrays[i][0] != null){
     objThree.options[i+1].value = threeArrays[i][0];
    }
    }
}
}
</script>
<body>
<table width="99%" border="0" align="center" style="border-bottom:1px solid #cccccc">
    <tr>
        <td width="10">
        <select name="areaid" id="areaid" onChange="setTown('areaid','townid')">
          <option value="">请选市县</option>
          <option value="1">杭州</option>
    <option value="2">湖州</option>
    <option value="3">温州</option>
   </select>
       </td>
<td width="10">
<select name="townid" id="townid">
    <option value="">请选地区</option>
   </select>
</td>    
      </tr> 
      <tr></tr> 
      <tr>
        <td width="10">
<select name="one" id="one" onChange="setTwo('one','two','three')">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
        </td>
        <td width="10">
<select name="two" id="two" onChange="setThree('two','three')">
<option value="">请选择</option>
</select>
        </td>
        <td width="10">
<select name="three" id="three">
<option value="">请选择</option>
</select>
        </td>
      </tr>
</table>
</body>
</html>  
分享到：
| js 省市联动效果 连动效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js返回头部，js自动适应浏览器宽度 js自动判断宽高

    js返回头部代码（不是jquery），类似京东商城右侧的返回头部功能，当滚动条移出第一屏时返回top出现（涉及到读取滚动条位置）。 里面包含 js自动实时判断浏览器窗口大小（有拆分出来）的功能，灵活变通下可以变换成...

    React滚动条组件

    rc-scrollbars 重振项目 react-custom-scrollbars 无摩擦原生浏览器滚动移动设备原生滚动条完全可定制的自动隐藏自动高度通用（在客户端和服务器上运行） requestAnimationFrame 为 60fps 没有额外的样式表经过良好...

    js返回top js实时读取浏览器宽度大小 jQuery

    js返回头部代码（不是jquery），类似京东商城右侧的返回头部功能，当滚动条移出第一屏时返回top出现（涉及到读取滚动条位置）。 里面包含 js自动实时判断浏览器窗口大小（有拆分出来）的功能，灵活变通下可以变换成...

    layui问题之自动滚动二级iframe页面到指定位置的方法

    目标：改变iframe页面滚动条位置 问题：没有麻溜溜的滚。。 二、经过 刚开始，以为只要滚动iframe里面的元素就行了，页面所有元素都在section里面，就通过section使滚动条滚动 $('section.layui-larry-box')....

    一套基于jquery或javascript的插件库

    一套基于jquery或javascript的插件库 - 包含：轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件

    常用的js效果

    省市区三级联动，模拟select下拉列表，随机生成字母数字验证码，快速排序实现，H5拖放API，自定义滚动条样式

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试...

    《程序天下：JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载...

    小部件：一组基于jQuery && javascript的小部件。一套基于jquery或javascript的插件库：轮播，标签页，滚动条，拖曳框，布局，搜索提示，城市选择（城市三级联动），日历等

    简介：支持xy双方向，无缝滚动，响应式，移动端手势操作，十余种动画特效等等 $ ( selector ) . slider ( options , callback ( api ) ) ; 标签页 简介：简易标签切换及淡入淡出幻灯片功能 $ ( selector ) . tabs ( ...

    联动下拉框分类列表，适合行业网站分类

    根据网上的三级联动修改的 带滚动条分类列表框，代码和数据库一起，单表实现三级联动，支持反选，效果类似于阿里巴巴发布信息里面的分类选择功能。适合分类很多的网站使用。asp+access+js

    javascript大全---个人认为是很全了

    省市三级刷新.htm 鼠标星星效果.htm 树 型 目 录 菜 单.htm 数字动态时钟.htm 随机产生图片.htm 提示在站点停留的时间.htm 图片的渐入渐出效果.htm 图片鼠标.htm 图形随窗口移动.htm 推 拉 式 菜 单.htm 网站广告Js...

    大名鼎鼎SWFUpload- Flash+JS 上传

    在FireFox中，如果窗口的滚动条没有回滚到顶部，那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标，将UI分离以交给开发人员控制和后续扩展 ...

    60个超实用JavaScript网页特效收集（珍藏版）

    鼠标滑过才出现的工具条，自动二级菜单 无色，淘宝商品展示橱窗，美化列表，公告滚动文字，简体字繁体字转换，锁定列表，荧光效果，信息滚动，用层模拟可移动的小窗口，自动获得文件名，图片透明渐变做的表格，来访...

    精通JavaScript+jQuery Part1

    　7.3　页面滚动条　 　第8章　用CSS制作实用的菜单　 　8.1　项目列表　 　8.2　无需表格的菜单　 　8.3　菜单的横竖转换　 　8.4　菜单实例一：百度导航条　 　8.5　菜单实例二：流行的Tab菜单　 　第9章　CSS滤镜...

    IBM WebSphere Portal门户开发笔记01

    78、JS滚动条滚动时监听 360 79、FRAMESET结构 361 80、设置SELECT为列表结构 361 81、JS获取鼠标位置 364 82、JS EVENT获取获取标签尺寸S 365 83、设置FLASH在网页的底层显示 365 84、IFRAME的SRC获取JS函数代码...

    css网络大讲堂 mobi

    本篇主要介绍了CSS的列表属性、滚动条属性、改善页面中表格的样式和改善页面中表单的样式，还介绍了关于滤镜以及鼠标指针样式和CSS与XML的整合。 第四篇：实例应用篇（第15、16章）。本篇主要介绍CSS和JavaScript...

    react-admin system solution : react 后台管理系统解决方案

    左边菜单(增加滚动条以及适配路由的 active 操作) UI 模块 按钮(antd 组件) 图标(antd 组件并增加彩色表情符) 加载中(antd 组件并增加顶部加载条) 通知提醒框(antd 组件) 标签页(antd 组件) 轮播图(ant 动效组件) 富...

    Tcl_TK编程权威指南pdf

    本地化的按钮和滚动条 文本组件中的图片 destroy不再产生错误 grid rowconfigure 补丁版本 第52章　tcl/tk 8．1 unicode与国际化 线程安全 高级正则表达式 新字符串命令 dde扩展模块 杂类 第53章 tcl/tk...

Magicbox
Global site tag (gtag.js) - Google Analytics