下拉框丿html宙斯,无限级别js联动下拉框类
/*
** ==================================================================================================
** 类名:CLASS_LIANDONG_YAO
** 功能:多级连动菜单
**
** 作者:YAODAYIZI
** ==================================================================================================
**/
function CLASS_LIANDONG_YAO(array)
{
//数组,联动的数据源
this.array=array;
this.indexName='';
this.obj='';
//设置子SELECT
// 参数:当前onchange的SELECT ID,要设置的SELECT ID
this.subSelectChange=function(selectName1,selectName2)
{
//try
//{
var obj1=document.all[selectName1];
var obj2=document.all[selectName2];
var objName=this.toString();
var me=this;
obj1.οnchange=function()
{
me.optionChange(this.options[this.selectedIndex].value,obj2.id)
}
}
//设置第一个SELECT
// 参数:indexName指选中项,selectName指select的ID
this.firstSelectChange=function(indexName,selectName)
{
this.obj=document.all[selectName];
this.indexName=indexName;
this.optionChange(this.indexName,this.obj.id)
}
// indexName指选中项,selectName指select的ID
this.optionChange=function (indexName,selectName)
{
var obj1=document.all[selectName];
var me=this;
obj1.length=0;
obj1.options[0]=new Option("请选择",'');
for(var i=0;i
{
if(this.array[i][1]==indexName)
{
//alert(this.array[i][1]+" "+indexName);
obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
}
}
}
}
调用起来很方便,程序和HTML彻底分开,只要在页面上放上你需要的SELECT,其他的设置都只要在JS里写几行代码就行了
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID,父级ID,名称
array[1]=new Array("华北地区","根目录","华北地区");
array[2]=new Array("上海","华南地区","上海");
array[3]=new Array("广东","华南地区","广东");
array[4]=new Array("徐家汇","上海","徐家汇");
array[5]=new Array("普托","上海","普托");
array[6]=new Array("广州","广东","广州");
array[7]=new Array("湛江","广东","湛江");
//--------------------------------------------
//这是调用代码
//设置数据源
var liandong=new CLASS_LIANDONG_YAO(array)
//设置第一个选择框
liandong.firstSelectChange("根目录","s1");
//设置子级选择框
liandong.subSelectChange("s1","s2");
liandong.subSelectChange("s2","s3");
页面代码只要这样
下面是效果,提示:你可以修改再运行
/p>
Transitional//EN">
JS联动下拉框
content="FrontPage.Editor.Document">
/* ** ================================================================================================== ** 类名:CLASS_LIANDONG_YAO ** 功能:多级连动菜单 ** ** 作者:YAODAYIZI
** ================================================================================================== **/ function CLASS_LIANDONG_YAO(array)
{
//数组,联动的数据源
this.array=array;
this.indexName='';
this.obj='';
//设置子SELECT
// 参数:当前onchange的SELECT ID,要设置的SELECT
ID
this.subSelectChange=function(selectName1,selectName2)
{
//try
//{
var
obj1=document.all[selectName1];
var
obj2=document.all[selectName2];
var
objName=this.toString();
var
me=this;
obj1.οnchange=function()
{
me.optionChange(this.options[this.selectedIndex].value,obj2.id)
}
}
//设置第一个SELECT
//
参数:indexName指选中项,selectName指select的ID
this.firstSelectChange=function(indexName,selectName) {
this.obj=document.all[selectName];
this.indexName=indexName;
this.optionChange(this.indexName,this.obj.id)
}
//
indexName指选中项,selectName指select的ID
this.optionChange=function
(indexName,selectName)
{
var
obj1=document.all[selectName];
var
me=this;
obj1.length=0;
obj1.options[0]=new Option("请选择",'');
for(var
i=0;i
{ if(this.array[i][1]==indexName)
{
//alert(this.array[i][1]+" "+indexName);
obj1.options[obj1.length]=new
Option(this.array[i][2],this.array[i][0]);
}
}
}
}
js在
target="_blank">这里
asp数据库调用在
href="http://www.21class.com/kehu/form/htmlpage1.asp"
target="_blank">这里
NAME="s1" >
selected>
NAME="s2" >
selected>
NAME="s3">
selected>
NAME="x1" >
selected>
NAME="x2" >
selected>
NAME="x3">
selected>
NAME="x4">
selected>
NAME="x5">
selected>
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
array[0]=new
Array("华南地区","根目录","华南地区"); //数据格式
ID,父级ID,名称
array[1]=new
Array("华北地区","根目录","华北地区");
array[2]=new
Array("上海","华南地区","上海");
array[3]=new
Array("广东","华南地区","广东");
array[4]=new
Array("徐家汇","上海","徐家汇");
array[5]=new
Array("普托","上海","普托"); array[6]=new Array("广州","广东","广州");
array[7]=new Array("湛江","广东","湛江");
//--------------------------------------------
//这是调用代码
var liandong=new CLASS_LIANDONG_YAO(array)
//设置数据源
liandong.firstSelectChange("根目录","s1");
//设置第一个选择框
liandong.subSelectChange("s1","s2");
//设置子级选择框
liandong.subSelectChange("s2","s3");
//例子2-------------------------------------------------------------
//数据源 var array2=new Array();//数据格式
ID,父级ID,名称
array2[0]=new
Array("测试测试","根目录","测试测试");
array2[1]=new
Array("华北地区","根目录","华北地区");
array2[2]=new
Array("上海","测试测试","上海");
array2[3]=new
Array("广东","测试测试","广东");
array2[4]=new
Array("徐家汇","上海","徐家汇");
array2[5]=new
Array("普托","上海","普托"); array2[6]=new Array("广州","广东","广州");
array2[7]=new Array("湛江","广东","湛江");
array2[8]=new
Array("不知道","湛江","不知道");
array2[9]=new Array("5555","湛江","555");
array2[10]=new
Array("++++","不知道","++++");
array2[11]=new
Array("111","徐家汇","111");
array2[12]=new Array("222","111","222");
array2[13]=new Array("333","222","333");
//--------------------------------------------
//这是调用代码
//设置数据源
var liandong2=new
CLASS_LIANDONG_YAO(array2);
//设置第一个选择框
liandong2.firstSelectChange("根目录","x1");
//设置子选择框
liandong2.subSelectChange("x1","x2")
liandong2.subSelectChange("x2","x3")
liandong2.subSelectChange("x3","x4")
liandong2.subSelectChange("x4","x5")
下拉框丿html宙斯,无限级别js联动下拉框类相关推荐
- 下拉默认选择_在Excel中制作二级联动下拉菜单,太有用了
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
- extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现
功能需求: ①页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框 ②选择省,则市下拉框中出现对应的该省下的市信息,选择市则区/县下拉框中出 现对应的该市下面的区/县信息. 需求分析(思路) ...
- php对接京东宙斯平台,利用京东联盟API获取自定义推广链接
本文将简单介绍下京东联盟.京东宙斯两个平台,以及如何利用京东宙斯平台的京东联盟API来快速获取自定义推广链接. 关于京东联盟 京东联盟(去官网看看)是一个CPS模式的营销平台,我们可以使用自己的网站放 ...
- python三级联动菜单_Excel–这才是三级联动下拉菜单的正确做法
Excel–这才是三级联动下拉菜单的正确做法,跟二级联动菜单完全不同! 文章来源:企鹅号 - Excel学习世界 今天教大家制作三级联动下拉菜单. 很多同学以为三级联动下拉做法跟二级联动下拉菜单是一样 ...
- js 实现上拉加载和下拉刷新
目录 一.js 实现上拉加载 二.js 实现下拉刷新 三.注意事项 一.js 实现上拉加载 实现上拉加载的原理:监听滚动条滑到页面底部,然后就去做一次请求数据. window.onscroll = f ...
- 怎么做百度360今日头条1688搜狗下拉词?宙斯下拉、54小超人下拉、超人2下拉
今天小编要给大家讲解什么的下拉词,下拉词是指用户在输入某个关键词而出现的联想词,也叫下拉词,下拉词的作用,每个引擎的下拉词位置绝无仅有的10个位置,所以当客户去搜索某个产品或服务时,一眼就会看到这些加 ...
- 下拉词html宙斯,宙斯浏览器怎么样?如何对其进行使用?
宙斯浏览器怎么样?如何对其进行很好的使用是很多新手用户都想要知道的.这款软件在功能上面十分的强大,智能风险提示.自动安全保护.高度安全加密等等应有尽有,更好的满足了广大用户的不同实际所需,因而从一经推 ...
- [小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
- html下拉菜单读取xml,基于XML的可配置Html下拉框的设计与实现
(江西制造职业技术学院信息工程系,江西 南昌 330000) 摘 要:专门针对Web下拉框控件影响网页性能.不利于美工和维护等问题,通过比较Web下拉框与Html下拉框各自的利弊,提出一种基于XML实 ...
最新文章
- 《人民日报》发声:科研人员收入理应体现他们的价值
- 数据中心推动的10大企业存储新趋势
- python局部变量想作用于全局_python 局部和全局作用域
- 【CHARINDEX】先按STATIC_VALUE排序 在按R_RECORD_CREATE_DATE排序
- [bzoj5405]platform
- 谁占用了我的Buffer Pool
- github基本使用教程
- Java基础教程【第三章:Java运算符】
- 调用一个Activity并返回结果
- 使用AIDL挂断电话
- GoldVideo-基于Web Assembly的H265播放器实现
- 42步进电机转速力矩曲线_42步进电机转速范围说明(28步进电机转速测试)
- StaMPS 在 SBAS 第一步报错 unable to read file ‘../slcosfactor.1.in‘ no such file or directory
- IntelliJ IDEA如何自动生成serialVersionUID?
- LOJ#6198. 谢特 SAM+启发式合并+01trie
- 系统集成项目管理工程师(中级)
- 基于ssm的个人博客系统的设计与实现(含源文件)
- 项目启动失败解决方法
- eclipse 工作空间的高效使用
- 青岛物联网关键技术资源发展路线图发布
热门文章
- 代谢环境的大规模重建和系统发育分析(Large-scale reconstruction and phylogenetic analysis of metabolic environments)
- python 缩进_Python缩进和冒号详解
- Java静态绑定动态绑定
- vue入门:(事件处理)
- 软件测试项目非功能测试方法,非功能测试类型汇总
- 【树莓派开发】树莓派 3B 入手 基础篇(1)
- 2022年下半年网络工程师考试真题下午及答案
- Java往文件里写入字符串_Java将字符串写入文本文件代码示例
- 敏捷教练----Scrum-概述
- 学妹居然叫我帮她P证件照自拍,结果发现.........