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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
js自定义select下拉框美化特效
May 12 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python logging模块handlers用法详解
2020/08/14 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
数据库专业英语
2012/11/30 面试题
大学生演讲稿范文
2014/01/11 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书