`

js三级滚动条

阅读更多
<%@ 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滚动条美化

    本主题将探讨如何利用JavaScript(JS)和CSS来美化滚动条,使其与网站的整体设计更加协调,提升用户体验。 首先,我们需要了解CSS在滚动条美化中的作用。CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-...

    New js 滚动条

    三、自定义JavaScript滚动条 开发者也可以选择不依赖库,自己编写JavaScript代码实现滚动条。这通常涉及到以下步骤: 1. 隐藏原生滚动条:通过CSS设置`overflow`属性为`hidden`,隐藏浏览器默认的滚动条。 2. 创建...

    css美化滚动条

    需要注意的是,这些CSS3的滚动条样式目前仅在Webkit内核的浏览器(如Chrome、Safari)中支持,对于Firefox、Edge等其他浏览器,需要使用它们特定的语法,或者借助JavaScript库实现跨浏览器的滚动条美化。 六、...

    JS三级联动不间断滚动

    在本主题"JS三级联动不间断滚动"中,我们将探讨如何使用JavaScript实现多级菜单之间的联动以及持续滚动的效果。 首先,我们需要理解“三级联动”的概念。在网页设计中,联动通常是指当用户在一个下拉菜单或选项中...

    flex滚动条三种实现方式

    3. **JavaScript库或CSS框架实现滚动条**: 对于更高级的自定义,开发者可以使用JavaScript库(如Perfect Scrollbar、SimpleBar等)或者CSS框架(如Bootstrap、Materialize等)来实现。这些库通常提供了丰富的选项...

    JS--几种滚动条方式

    - **原生JS库**:例如`SimpleBar`,它是一个轻量级的库,可以为任何HTML元素添加自定义滚动条,并且兼容各种浏览器。 3. **CSS Grid和Flexbox**: 使用CSS Grid或Flexbox布局,可以通过调整容器的大小和溢出属性...

    动态滚动条动态滚动条

    8. **滚动条插件和库**:开发者可以利用像Perfect Scrollbar、SimpleBar等第三方库来实现更高级的滚动条功能和动画效果。 9. **无障碍性**:对于视障用户,辅助技术如屏幕阅读器依赖于标准的滚动条行为。因此,...

    滚动条案例

    在本"滚动条案例"中,我们将探讨如何使用JavaScript和其他相关技术来实现自定义滚动条的功能。 首先,我们注意到有三个HTML文件:`robot.html`和`index.html`,它们可能是示例中的不同页面,展示了滚动条的不同应用...

    jQuery仿Mac OS X Lion 系统滚动条插件nanoScroller.js

    jQuery nanoScroller.js插件就是专为此目的设计的,它提供了一种简单的方式来实现与Mac OS X Lion系统类似的滚动条效果。 **一、nanoScroller.js插件的核心特性** 1. **平滑滚动**:nanoScroller.js实现了与Mac OS...

    js滚动条实例方便学习

    在"js滚动条实例方便学习"这个主题中,我们将探讨如何利用JavaScript来实现自定义滚动效果。首先,`s.html`可能是包含JS滚动条实例的HTML文件,它可能包含了用于展示和测试滚动条功能的代码。`images`文件夹则可能...

    jquery轻量级上下(左右)滚动条插件及使用方法

    jQuery轻量级滚动条插件可以显著提升网站的用户体验,使滚动操作更加流畅和美观。无论是`perfect-scrollbar`还是`malihu custom scrollbar`,它们都提供了丰富的配置选项和API,可以根据项目需求进行个性化定制。...

    jquery多款滚动条插件插件

    SimpleBar是一款轻量级的jQuery滚动条插件,它提供了一种优雅的方式替换默认的浏览器滚动条。SimpleBar支持自定义CSS样式,可以轻松调整滚动条的颜色、大小等外观属性,并且兼容各种现代浏览器,包括移动设备。 二...

    很好的jq模拟滚动条

    由于原生浏览器的滚动条样式有限,且在不同浏览器间存在差异,开发者们常常会寻求第三方解决方案来实现一致且美观的滚动条设计,这就是jq模拟滚动条插件的作用所在。 这个插件提供了多种预设样式和自定义选项,使得...

    无刷新联级,滚动条滚动加载数据

    总结,"无刷新联级,滚动条滚动加载数据"是现代Web开发中的重要技术,它通过JavaScript和Ajax优化了用户体验,使得用户能够在不刷新页面的情况下浏览大量信息。同时,通过监听鼠标滚轮事件,实现滚动加载,使数据...

    TABLE滚动条

    如果"js"和"graphics"目录包含了源码或图形资源,这可能是实现特定滚动条功能的源代码。学习这些源码有助于理解滚动条背后的实现原理,也可以作为自己开发类似功能的参考。 综上所述,"TABLE滚动条"不仅涉及HTML...

    三级滚动效果

    在IT行业中,"三级滚动效果"通常指的是在一个交互界面中,三个层级的数据或者选项可以通过滚动进行联动选择。这种效果常见于地区选择、商品分类筛选等场景,例如在电商平台的搜索栏中选择省份、城市和区县,或者在...

    jquery.nicescroll仿IOS滚动条美化插件.zip

    jQuery.nicescroll是一款基于JavaScript和jQuery库的轻量级插件,它的主要功能是替换浏览器默认的滚动条,提供自定义样式和动画效果。这款插件兼容多种浏览器,包括Chrome、Firefox、Safari、IE8+等,适用于桌面端和...

    公告滚动条显示

    ### 公告滚动条显示知识点解析 #### 一、知识点概览 本篇文章将围绕一个前端公告滚动条的实现进行详细解析。该滚动条通过HTML、CSS与JavaScript结合使用,能够在网页前端展示需要滚动的公告内容,从而为用户提供...

Global site tag (gtag.js) - Google Analytics