js实现二级联动简单实例


Posted in Javascript onJanuary 11, 2020

本文实例为大家分享了js实现二级联动的具体代码,供大家参考,具体内容如下

此实例是一个简单的二级联动,第一个列表中的值为固定的,第二个列表中的值随着第一个列表值的变化而变化,即第一个列表影响第二个列表。

实现思路:先写两个<select>标签,用name或id来区分;写一个二维数组来存放信息;在一级菜单中使用onchange()事件来动态加载二级菜单的内容。

完整代码

<html>
 <head>
 <meta charset="UTF-8">
 <title>简单城市二级联动</title>
 </head>
 <body>
 <form action="" method="post" name="form1">
  <div id="province">
  <select name="sltProvince" οnchange="selectCity()">
   <option value="">请选择省份</option>
   <option value="">山西省</option>
   <option value="">陕西省</option>
   <option value="">江西省</option>
   <option value="">四川省</option>
  </select>
  </div>
  <div id="city">
  <select name="sltCity">
   <option value="0">请选择市区</option>
  </select>
  </div>
 </form>
 </body>
 <script type="text/javascript" language="javascript">
 var cityInfo = [["请选择市区","太原市","吕梁市","临汾市","运城市","阳泉市"],
         ["请选择市区","西安市","咸阳市","汉中市","延安市","榆林市"],
         ["请选择市区","南昌市","九江市","鹰潭市","上饶市","景德镇市"],
         ["请选择市区","成都市","绵阳市","雅安市","乐山市","眉山市"]];
 
 /*二级联动一般使用onchange事件*/
 function selectCity(){
  /*获取省份下拉框的对象*/
  var pro = document.form1.sltProvince;
  /*获取市区下拉框的对象*/
  var cit = document.form1.sltCity;
  /*得到对应得城市数组,selectedIndex表示下拉框列表的索引值*/
  var selectParam = cityInfo[pro.selectedIndex-1];
  /*将城市列表的选项只留下第一个提示选项*/
  cit.length = 1;
  for(var i=0;i<selectParam.length;i++){
    /*第一个selectParam[i]表示城市option中的value值,第二个selectParam[i]表示文本信息*/
    cit[i] = new Option(selectParam[i],selectParam[i]);
  }
 }
 </script>
</html>

希望对大家有所帮助!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
通过JAVAScript实现页面自适应
Jan 19 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
php 修改密码实现代码
May 24 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
jQuery实现轮播图效果demo
Jan 11 #jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 #Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 #Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
You might like
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
JavaScript对象原型链原理详解
2020/02/05 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
如何利用Python识别图片中的文字
2020/05/31 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python对execl 处理操作代码
2020/06/22 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
几道PHP的面试题
2012/05/19 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
商场活动策划方案
2014/01/24 职场文书
演讲稿格式范文
2014/05/19 职场文书
汽车广告策划方案
2014/05/31 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
话题作文之呼唤
2019/12/18 职场文书
MySQL注入基础练习
2021/05/30 MySQL