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 相关文章推荐
jQuery实现高亮显示的方法
Mar 10 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
js实现抽奖效果
2017/03/27 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python3.7.0的安装步骤
2018/08/27 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python Cartopy的基础使用详解
2020/11/01 Python
简历上的自我评价怎么写
2014/01/28 职场文书
十八大感想感言
2014/02/10 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
优秀家长自荐材料
2014/08/26 职场文书
校运会新闻稿
2015/07/17 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
java实现web实时消息推送的七种方案
2022/07/23 Java/Android