js实现二级联动

最新推荐文章于 2023-05-08 14:18:33 发布
最新推荐文章于 2023-05-08 14:18:33 发布
阅读量866 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27214791/article/details/50616369
版权

这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。

 

[xhtml]  view plain  copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    
  2. <HTML>    
  3.     <HEAD>    
  4.         <TITLE>New Document</TITLE>  
  5.         <META NAME="Generator" CONTENT="EditPlus">  
  6.         <META NAME="Author" CONTENT="">  
  7.         <META NAME="Keywords" CONTENT="">  
  8.         <META NAME="Description" CONTENT="">  
  9.         <mce:script language="JavaScript" type="text/javascript"><!--  
  10.         //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组    
  11.         var city=[    
  12.             ["北京","天津","上海","重庆"],  
  13.             ["南京","苏州","南通","常州"],  
  14.             ["福州","福安","龙岩","南平"],  
  15.             ["广州","潮阳","潮州","澄海"],  
  16.             ["兰州","白银","定西","敦煌"]  
  17.         ];    
  18.         function getCity(){    
  19.             //获得省份下拉框的对象    
  20.             var sltProvince=document.form1.province;  
  21.             //获得城市下拉框的对象    
  22.             var sltCity=document.form1.city;    
  23.             //得到对应省份的城市数组    
  24.             var provinceCity=city[sltProvince.selectedIndex - 1];    
  25.             //清空城市下拉框，仅留提示选项    
  26.             sltCity.length=1;    
  27.             //将城市数组中的值填充到城市下拉框中    
  28.             for(var i=0;i<provinceCity.length;i++){    
  29.                 sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);    
  30.                 }    
  31.         }    
  32.           
  33. // --></mce:script>    
  34.     </HEAD>    
  35.     <BODY>    
  36.         <FORM METHOD=POST ACTION="" name="form1">  
  37.             <SELECT NAME="province" onChange="getCity()">  
  38.                 <OPTION VALUE="0">请选择所在省份</OPTION>  
  39.                 <OPTION VALUE="直辖市">直辖市</OPTION>  
  40.                 <OPTION VALUE="江苏省">江苏省</OPTION>  
  41.                 <OPTION VALUE="福建省">福建省</OPTION>  
  42.                 <OPTION VALUE="广东省">广东省</OPTION>    
  43.                 <OPTION VALUE="甘肃省">甘肃省</OPTION>  
  44.             </SELECT>    
  45.             <SELECT NAME="city">    
  46.                 <OPTION VALUE="0">请选择所在城市</OPTION>    
  47.             </SELECT>    
  48.         </FORM>    
  49.     </BODY>    
  50. </HTML>    

 

这段代码比较简单。

如果对js不大熟悉，可以看看下面关于js处理select对象的内容：

1、使用selectedIndex属性获取当前选项的索引
    下拉框的选项是一个线性数组，每个选项都有一个索引，selectedIndex表示当前被选中的选项的索引号。结合options属性，可以得到被选中 的option对象，从而对其做进一步的处理。当下拉框可多选时，selectedIndex属性返回第一个被选中的索引。
    selectedIndex是个只读的属性，想把通过索引指定的下拉框的项设置为选中状态，可以设置option对象的selected=true来实现。

2、为select对象添加一个选项
    sltCity[i + 1 ] = new  Option(provinceCity[i],provinceCity[i]);
    new  Option(provinceCity[i],provinceCity[i])表示创建一个值为 provinceCity[i]，文本为 provinceCity[i]的option对象， sltCity是页面上的city对象， i + 1指定新添选项的位置。

3、清空一个select对象
    要将下拉框的所有选项删除有两种方法，


    第一种方法就是遍历删除：

[javascript]  view plain  copy
  1. var l=myselect.length;    
  2. for(var i=0;i<l;i++){    
  3.     myselect.options[i]=null;    
  4.    

 

第二种方法比较简单，因此一般都使用此方法：

[javascript]  view plain  copy
  1. myselect.length=0;  

Jack Bai
关注
js二级联动
weixin_66602553的博客
04-13 977
1.二级联动 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三级联动</title> </head> <body onload="fa()"> <!-- 定义下拉框 --> <label>省份:</label> <select id="sa" onchange="fb(
JavaScript--二级联动
m0_63223374的博客
04-13 193
JavaScript--二级联动
js中的二级联动
一直在努力的小幸运
11-02 2513
省份市级城市联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js省市二级联动</title> </head> <body> <form name="aform" method="get" action="#"> 省份：<select id="province" name="p
JS实现二级联动
LIUZEYU12A
05-19 475
onchange 事件 <body> <select id="province" onchange="func1()"> <option value="shandong">山东</option> <option value="hebei">河北</option> <option value="beijing">北京</option> </se
js实现二级联动（包括js、vue、react+ts、vue3+ts的写法）
最新发布
朱远辉的博客
05-08 1381
js实现二级联动（包括js、vue、react+ts、vue3+ts的写法）
js实现二级联动简单实例
11-28
本文实例为大家分享了js实现二级联动的具体代码，供大家参考，具体内容如下 此实例是一个简单的二级联动，第一个列表中的值为固定的，第二个列表中的值随着第一个列表值的变化而变化，即第一个列表影响第二个列表。 ...
原生js实现二级联动菜单
10-15
本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先，我们需要了解HTML结构。在示例代码中，有两个`<select>`元素，分别代表一级菜单（chose1）和二级菜单（chose2）。一级菜单的`onchange`事件被...
基于Javascript实现二级联动菜单效果
10-22
在本文中，作者详细介绍了如何使用JavaScript实现二级联动菜单效果。二级联动菜单是一种常见的网页交互功能，当用户在选择上一级菜单（如省份）时，下一级菜单（如城市）会根据上一级的选择变更内容。这种效果可以...
js实现下拉框二级联动
10-17
本文详细介绍了如何使用JavaScript实现下拉框二级联动功能，提供了具体的代码实现以及相关HTML结构示例。 首先，需要准备一个基本的HTML页面结构，其中包括题型选择的下拉框以及对应的正确选项输入方式。页面上有一...
javascript实现二级联动下拉框.docx
12-05
JavaScript 实现二级联动下拉框 本文将详细介绍如何使用 JavaScript 实现二级联动下拉框，包括标题、描述、标签、部分内容等信息。 标题：JavaScript 实现二级联动下拉框 描述：JavaScript 实现二级联动下拉框是...
js实现简单的二级联动效果
11-30
话不多说，请看代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> [removed] [removed] = function () { // 创建两个下拉列表 var sel1 = document.createElement("select"); var sel2 = document.createElement("select"); // 添加到body中 document.body.a
JavaScript——二级联动
weixin_67658096的博客
09-28 502
【代码】JavaScript——二级联动。
JS:二级联动（代码）
weixin_59519449的博客
10-09 466
整体代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省:<select id="pro"></select> 市:<select id="city"></select> <script type="
简单的二级联动js
zhangxiaodui的博客
01-23 1539
马上本小白又要做一个项目的一个小模块了，然后看到里面有个二级联动，其实就是挺简单的那种，但是我还是想记录一下咯！过几天就要用到了嘛！ 要求呢：就是两个下拉菜单，一个是请选择电器种类（洗衣机、空调、冰箱），另一个是请选择电器类型（不同电器对应不同的电器类型），好，就是这样简单。下面开始看代码。 html lang="cn"> head> meta charset="UTF-8">
js实现简单的二级联动
香妹儿的博客
12-13 175
HTML代码：         &lt;select id="d1" onchange="changeporvien()"&gt;             &lt;option&gt;==请选择身份&lt;/option&gt;             &lt;option&gt;四川&lt;/option&gt;             &lt;option&gt;北京
js之dom二级联动
qq_52648305的博客
04-12 544
二级联动 说明,此文使用原生 js 实现二级联动,有需要者自行取用 数据结构代码块 var data = { 河南省:{ 郑州市:['金水区','二七区','中牟县'], 漯河市:['郾城区','源汇区','召陵区'], 洛阳市:['西工区','吉利区','洛龙区'] }, 浙江省:{ 杭州
二级联动js
X_Xieli的博客
12-08 167
二级联动js
JS二级联动
wieyi的博客
03-17 396
     New Document        //定義了城市的二維數組，裏面的順序跟省份的順序是相同的。通過selectedIndex獲得省份的下標值來得到相應的城市數組      var city=[      ["北京","天津","上海","重慶"],      ["南京","蘇州","南通","常州"],      ["福州","福安","龍巖","南平
使用JavaScript实现二级菜单联动
"javascript 实现二级联动" 在网页开发中，二级联动通常用于创建下拉菜单系统，其中第二个下拉菜单的内容依赖于用户在第一个下拉菜单中的选择。这种交互方式常见于地区选择、分类筛选等场景，提高了用户体验并减少...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值