javascript实现简单的二级联动


Posted in Javascript onMarch 19, 2015

二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市;点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴。

要想实现这个步骤,就要用到javascript来实现。其中原理用到onchange时间。

首先,onchange 事件会在域的内容改变时发生。支持该事件的 JavaScript 对象:fileUpload, select, text, textarea,我们在实现二级联动中正是用到select来完成。

以下是HTML代码,先设置一个select为省,第二个select为市,但是市我们在js中用数组将其与省份连接。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript二级联动</title>

</head>

<body>

<select id="province">

    <option value="-1">省</option>

    <option value="0">北京</option>

    <option value="1">浙江</option>

</select>

<select id="city">

</select>

<script src="../js/province.js"></script>

</body>

</html>

 以下是js代码

var province = document.getElementById("province");

var city = document.getElementById("city");

var area = [

['朝阳','海淀','北京'], //第0个area的数组。0{0,1,2}

['杭州','海宁']         //第1个area的数组, 1{0.1}

];

 function choose(){

     var opt = "";

     var len = area[province.value];  //如果选择北京0,那么,len=['朝阳‘,'海淀‘]    这个是连接哪个省份对应着哪个市的<span style="background-color: #888888;">市的</span>数组

     if(province.value == '-1'){     //因为select的value为-1的时候是‘省'这个字,而不是北京,所以,我们选择这个省的时候对应着让他的市为空

         city.innerHTML = opt;

     }

     for(var i = 0;i < len.length; i++){  //area的数组个数for(i = 0;i < 3; i++)

        opt = opt + '<option value ="'+ i +'">  '+ len[i]+ '</option>'  //opt = "" + <option value = "0">朝阳(lin[0])</option>,

     //opt = <option value = "0">朝阳(lin[0])</option>, + <br>





















 

     <option value = "1">海淀(lin[1])</option>

     //opt = <option value = "0">朝阳(lin[0])</option>, + <br>






















 

     <option value = "1">海淀(lin[1])</option> + <br>






















 

     <option value = "2">北京(lin[2])</option>

     }

     city.innerHTML = opt;

}

province.onchange = function(){

    choose();

}

二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市;点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴。

要想实现这个步骤,就要用到javascript来实现。其中原理用到onchange时间。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
jQuery实现360°全景拖动展示
Mar 18 #Javascript
自定义百度分享的分享按钮
Mar 18 #Javascript
javascript实现密码强度显示
Mar 18 #Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 #Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 #Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 #Javascript
JS制作简单的三级联动
Mar 18 #Javascript
You might like
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
初识ThinkPHP控制器
2016/04/07 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python word转pdf代码实例
2019/08/16 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
运动会入场式解说词
2014/02/18 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
早恋主题班会
2015/08/14 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
css弧边选项卡的项目实践
2023/05/07 HTML / CSS