js三级滚动条

最新推荐文章于 2023-01-11 10:25:57 发布
最新推荐文章于 2023-01-11 10:25:57 发布
阅读量80 收藏
点赞数
分类专栏： js效果 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javawjy/article/details/83779342
版权
<%@ 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>
javawjy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue下拉框值改变_当下拉框的值改变后另一个下拉框的值跟着变！用JS怎么实现？...
weixin_39617113的博客
12-22 3091
展开全部把下拉框的数据e69da5e887aa62616964757a686964616f31333337613233全部读出，并存放在JS的Array中。当选择下拉框的时候触发onChange()事件动态的添加或改变级联下拉框的内容。varareaArray=newArray();areaArray[areaArray.length]=newArray("1","杭州");areaAr...
element ui 滚动条插件
一只小白奔向大牛的故事
07-17 3257
<el-scrollbar></el-scrollbar> 用的时候加个高度就行了 不喜欢用这个用下面这个 在一个博客看到的还不错! 先张贴一张效果图： 说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法： 1、安装vue-happy-scroll 推荐使用npm安装，这样...
省市县 ------ 三级滚动（android）
chezhaobin9421的博客
12-03 130
集成三级滚动： ① private: CityPickerView mCityPickerView = new CityPickerView(); ② oncreate: 预先加载仿滚轮实现的全部数据 mCityPickerView.init(this); ③ 点击响应： ss.setOn...
文章自动生成目录及侧边栏目录滚动特效的插件toc-helper
weixin_33852020的博客
03-03 1361
2019独角兽企业重金招聘Python工程师标准>>> ...
JS滑动滚动的n种方式
热门推荐
MyWay
02-22 2万+
window.scroll｜window.scrollBy｜window.scrollTo｜window.scrollByLines｜window.scrollByLines｜element.scrollIntoVIew｜srcollTop | 判断是否某元素的外层可滑动and so on，应有尽有
动态Js级联(地区级联)
Welegend
08-27 2255
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档    var areaArray = new Array();  areaArray[areaArray.length]=new Array("10","北京市");  areaArray[ar
原生js实现自定义滚动条组件开发
蒲公英芽的博客
01-28 1070
原生js实现自定义滚动条组件开发 功能需求： 1. 按照数据结构创建菜单内容，显示在页面中； 2. 点击一级菜单后，显示对应的二级菜单内容，如果整体内容溢出，则出现滚动条； 3. 滚动条的高度要随着整体内容高度的改变而改变。 4. 鼠标拖动滚动条，整体内容要随着向上滚动。 - 这个案例中包括折叠菜单和滚动条两个组件 ，所以可以分开来写，然后整合到一起。 - 折叠菜单中要考虑多级菜单出现的情况，使用递归来做，数据的结构一定要统一，方便对数据进行处理。 - 滚动条的创建中，有两个比例等式，一是**滚动条
javascript中制作滚动代码的常用属性
qq_41988669的博客
12-04 387
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.
css轮播图滚动条,纯CSS手动滑动轮播图（隐藏滚动条）
weixin_39904268的博客
08-03 1278
HTML：CSS:.bigder{width: 100%;margin: 0 auto;height: 195px;overflow: hidden;}.big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}.bigder dl{background-color: ghostwhite;...
菜单栏设置三级，我把菜单栏高度固定，需求是要求超出菜单高度的二级三级都要滚动条...
weixin_35750953的博客
01-11 111
如果您希望菜单栏高度固定，并且要求二级和三级菜单超出菜单高度时都需要出现滚动条，您可以使用 CSS 中的 overflow 属性来实现。 给二级和三级菜单都加上 overflow: auto; 或者 overflow: scroll;，这样当内容高度超过菜单高度时就会出现滚动条。 代码示例： ul.menu { height: 300px; overflow: hidden; } ul.m...
mousescroll.js网页滚动条插件
06-24
**mousescroll.js网页滚动条插件**是一款专为网页设计和开发人员打造的工具，主要用于增强网页的滚动体验。这款插件基于流行的JavaScript库jQuery构建，利用jQuery的高效性能和广泛兼容性，使得在各种浏览器环境中都...
js滚动条美化
12-16
本主题将探讨如何利用JavaScript（JS）和CSS来美化滚动条，使其与网站的整体设计更加协调，提升用户体验。 首先，我们需要了解CSS在滚动条美化中的作用。CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-...
vue中改变滚动条样式的方法
10-15
在Vue.js应用中，改变滚动条的样式通常涉及到两种主要的方法：一种是使用原生CSS样式，另一种是借助第三方库，如vuescroll。这两种方法都有其特点和适用场景，下面将详细介绍这两种方法。 **一、原生CSS样式** ...
New js 滚动条
03-08
三、自定义JavaScript滚动条 开发者也可以选择不依赖库，自己编写JavaScript代码实现滚动条。这通常涉及到以下步骤： 1. 隐藏原生滚动条：通过CSS设置`overflow`属性为`hidden`，隐藏浏览器默认的滚动条。 2. 创建...
工作述职报告PPT模板 (25)
07-12
【作品名称】：工作述职报告PPT模板 (25) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
H公司项目管理基础培训两份材料.pptx
07-12
H公司项目管理基础培训两份材料.pptx
OGSM一页纸，让战略极简落地.pptx
最新发布
07-12
OGSM一页纸，让战略极简落地.pptx
第三季度部门工作报告PPT模板
07-12
【作品名称】：第三季度部门工作报告PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
winform chart x轴 毫秒级 滚动条
01-17
Winform图表的X轴显示毫秒级的数据通常需要结合滚动条来实现。首先，需要创建Winform图表，并设置X轴的数据为毫秒级。然后，通过设置滚动条的最小值和最大值来限定显示的时间范围。滚动条的滑块位置变化时，可以实时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值