js 四级联动

最新推荐文章于 2023-07-09 09:38:20 发布
最新推荐文章于 2023-07-09 09:38:20 发布
阅读量250 收藏
点赞数
原文链接：https://www.cnblogs.com/louby/p/7085534.html
版权

转载于:https://www.cnblogs.com/louby/p/7085534.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
/*
** ==================================================================================================
** 类名：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.onchange = 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 < this.array.length; 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]);
}
}
}

}
</script>
</head>
<body>

<form name="form1" method="post">

<SELECT ID="x1" NAME="x1">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x2" NAME="x2">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x3" NAME="x3">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x4" NAME="x4">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x5" NAME="x5">
<OPTION selected></OPTION>
</SELECT>

</form>
</body>


<script language="javascript">
//数据源 数据格式 ID，父级ID，显示名称
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("遵义会议", "红花岗区", "遵义会议");

//--------------------------------------------
//这是调用代码
//设置数据源
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")
</script>
</html>

Lsh69
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js四级联动(下拉框选择地区)
qq_35396397的博客
12-21 1988
数据与视图 如何根据数据渲染视图思路? 1:了解已知的数据接结构 2: 知到你要的数据是什么 3: 知道你的页面结构是什么？ 4: 想办法拿到你想要的数据；方式有：数组对象的遍历；数组内置API 字符拼API 字符串变数组；数组变字符串，等基本操作。 5：看数据获取到的数据与你搭建的页面结构是否符合？ 6：让你获取的数据与你搭建的页面结构相吻合。想办法：处理数据或者调整html结构 实现样式 7...
四层级联动JavaScript代码
09-02
JS四级联动代码
html+原生js实现 4级select联动完整实例
易查薪
03-22 525
html+原生js实现 4级select联动完整实例
原生js四级联动
qq_41099548的博客
07-15 703
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
使用js实现四级联动
05-29 1165
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> ...
省市区县街道四级联动数据
05-12
在IT行业中，"省市区县街道四级联动数据"通常指的是一个地理信息系统（GIS）或Web应用中的一个重要功能，用于实现地址选择的下拉菜单联动效果。这种联动数据结构设计可以帮助用户方便地从省级到市级、区县级再到街道...
前端四级联动插件
04-13
四级联动插件是前端开发中的一个常见组件，尤其适用于处理地理位置选择的问题。在这个场景中，"前端四级联动插件"指的是一个能够实现省、市、区、街道四级地址选择功能的交互组件。这个插件通常用于电商、物流等需要...
js 移动端 城市四级联动
04-10
"js 移动端 城市四级联动"是一个解决方案，它允许用户通过四级菜单（省、市、区、街道）逐级选择，以实现精确的地理位置定位。这个功能通常基于JavaScript实现，利用Ajax异步获取数据，结合HTML和CSS来展示交互式的...
省市区镇四级联动
05-31
在中国的地理信息系统中，"省市区镇四级联动"是一种常见的数据选择方式，尤其在网站开发、移动应用或者后台管理系统中，用于用户输入地址时提供便捷的选择。这种联动机制基于中国的行政区域划分，包括省份（省级行政...
JS实现四级联动
yp2294188167的博客
12-24 948
html <select name="" id="province"></select> <select name="" id="city"> </select> <select name="" id="qu"> </select> <select name="" id="town"> &...
js省级联动
aimaonu2505的博客
02-16 1751
1.webform页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Sslt.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http...
四级联动下拉菜单
开裆裤儿的博客
01-04 4031
数据库导出地址数据联动显示下拉菜单 1.先说数据库结构,上图: 结构副id形式,sid是本条数据的id,fid是本条数据的上级数据的sid. 就是把这种级别关系建立在数据库里,之后用起来就简单了. 2.前端代码 html: 市级: 北京 区级: 全部 街道: 全部 社区: 全部
四级联动地址选择器（下拉框选择地区）
chenyueliu的博客
05-13 2202
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
实现省市区镇四级联动选择器（地址选择）
qq_54206265的博客
03-20 3912
实现省市区镇四级联动选择器（地址选择） 1.简介 由于学习要求，每次做注册，地址选择时，都需要省市区镇四级联动选择器 ,到网上下载很难找到合适的资源，即使有，但资源都是往年的，没有实时更新。 所以，我们将利用Java Jsoup爬虫技术和jQuery,html实现一个自己的现省市区镇四级联动选择器。
JQuery选择器
慕北丶
03-21 195
文章目录选择器ID选择器类选择器元素选择器组选择器后代选择器子选择器选择第一个元素选择最后一个元素not选择器偶数选择器奇数选择器eq选择器（选择指定索引的元素）gt(index)选择器，选择大于指定索引的元素lt(index)，选择小于指定索引的元素属性选择器属性值选择器不等于的以XX开头的包含xx的以XX结尾的 选择器 JQuery选择器和css的选择器语法很类似 ID选择器 <body...
JavaScript实现select下拉菜单省份和城市的级联菜单
syy的博客
11-19 2957
使用JavaScript实现数组与select标签结合使用对省份及对应的城市的显示
JavaScript之实现select下拉选择框的联动
yusuhbdybxbdhj的博客
07-09 1953
这段代码的作用是实现了一个省市选择的联动功能，当选择了一个省份后，对应的城市会显示在城市选择框中。每次选择不同的省份，城市选择框的选项会动态地改变。
Layui Select四级联动效果触发
weixin_44171391的博客
12-20 491
刚入行三个月小白，写的不好请大佬指教！ 前端页面 <div class="div-left"> <span class=" layui-form-label typeface">省</span> <select id="province" name="provinceId" class="province-selector" lay-filter="province"
html javascript四级联动
最新发布
03-15
HTML和JavaScript的四级联动是一种常见的前端开发技术，用于实现多个下拉列表之间的关联关系。通过选择一个下拉列表的选项，可以动态改变其他下拉列表的内容。 实现四级联动的基本步骤如下： 1. 在HTML中创建多个下拉列表，每个下拉列表都有一个唯一的id属性。 2. 使用JavaScript编写事件处理函数，当第一个下拉列表的选项改变时，触发该函数。 3. 在事件处理函数中，根据第一个下拉列表的选项值，动态生成第二个下拉列表的选项。 4. 根据第二个下拉列表的选项值，动态生成第三个下拉列表的选项。 5. 根据第三个下拉列表的选项值，动态生成第四个下拉列表的选项。 以下是一个简单的示例代码： HTML部分： ```html <select id="first"> <option value="option1">选项1</option> <option value="option2">选项2</option> </select> <select id="second"></select> <select id="third"></select> <select id="fourth"></select> ``` JavaScript部分： ```javascript // 获取下拉列表元素 var firstSelect = document.getElementById("first"); var secondSelect = document.getElementById("second"); var thirdSelect = document.getElementById("third"); var fourthSelect = document.getElementById("fourth"); // 第一个下拉列表改变时触发事件处理函数 firstSelect.addEventListener("change", function() { // 根据选项值生成第二个下拉列表的选项 var selectedOption = firstSelect.value; // 根据selectedOption生成第二个下拉列表的选项 // ... // 清空第三个和第四个下拉列表的选项 thirdSelect.innerHTML = ""; fourthSelect.innerHTML = ""; }); // 第二个下拉列表改变时触发事件处理函数 secondSelect.addEventListener("change", function() { // 根据选项值生成第三个下拉列表的选项 var selectedOption = secondSelect.value; // 根据selectedOption生成第三个下拉列表的选项 // ... // 清空第四个下拉列表的选项 fourthSelect.innerHTML = ""; }); // 第三个下拉列表改变时触发事件处理函数 thirdSelect.addEventListener("change", function() { // 根据选项值生成第四个下拉列表的选项 var selectedOption = thirdSelect.value; // 根据selectedOption生成第四个下拉列表的选项 // ... }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值