js实现的下拉框二级联动效果


Posted in Javascript onApril 30, 2016

本文实例讲述了js实现的下拉框二级联动效果。分享给大家供大家参考,具体如下:

<script language="JavaScript" type="text/javascript">
<!--
/*
 * 说明:将指定下拉列表的选项值清空
 * 转自:Gdong Elvis ( http://www.gdcool.net )
 *
 * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须
 */
 function removeOptions(selectObj)
 {
 if (typeof selectObj != 'object')
 {
 selectObj = document.getElementById(selectObj);
 }
 // 原有选项计数
 var len = selectObj.options.length;
 for (var i=0; i < len; i++) {
 // 移除当前选项
 selectObj.options[0] = null;
 }
 }
 /*
 * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须
 * @param {Array} optionList 选项值设置 格式:[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ,必须
 * @param {String} firstOption 第一个选项值,如:“请选择”,可选,值为空
 * @param {String} selected 默认选中值,可选
 */
 function setSelectOption(selectObj, optionList, firstOption, selected) {
 if (typeof selectObj != 'object')
 {
 selectObj = document.getElementById(selectObj);
 }
 // 清空选项
 removeOptions(selectObj);
 // 选项计数
 var start = 0;
 // 如果需要添加第一个选项
 if (firstOption) {
 selectObj.options[0] = new Option(firstOption, '');
 // 选项计数从 1 开始
 start ++;
 }
 var len = optionList.length;
 for (var i=0; i < len; i++) {
 // 设置 option
 selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
 // 选中项
 if(selected == optionList[i].val)  {
 selectObj.options[start].selected = true;
 }
 // 计数加 1
 start ++;
 }
 }
 //-->
</script>
<script language="JavaScript" type="text/javascript">
var cityArr = [];
cityArr['江苏省'] =
[
 {txt:'南京', val:'南京'},
 {txt:'无锡', val:'无锡'},
 {txt:'徐州', val:'徐州'},
 {txt:'苏州', val:'苏州'},
 {txt:'南通', val:'南通'},
 {txt:'淮阴', val:'淮阴'},
 {txt:'扬州', val:'扬州'},
 {txt:'镇江', val:'镇江'},
 {txt:'常州', val:'常州'}
 ];
cityArr['浙江省'] =
[
 {txt:'杭州', val:'杭州'},
 {txt:'宁波', val:'宁波'},
 {txt:'温州', val:'温州'},
 {txt:'湖州', val:'湖州'}
 ];
function setCity(province)
{
 setSelectOption('city', cityArr[province], '-请选择-');
}
</script>
 <select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);">
 <option value="">-请选择-</option>
 <option value="江苏省">江苏省</option>
 <option value="浙江省">浙江省</option>
 </select>
 省
 <select name="city" id="city">
 <option value="">-请选择-</option>
 </select>
 市
Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
微信小程序日历效果
Dec 29 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 #Javascript
js简单倒计时实现代码
Apr 30 #Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 #Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 #Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 #Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 #Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
会计出纳岗位职责
2013/12/25 职场文书
财务主管的岗位职责
2013/12/30 职场文书
员工培训邀请函
2014/01/11 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
网络书店创业计划书
2014/02/07 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
个人年终总结怎么写
2015/03/09 职场文书
小学英语课教学反思
2016/02/15 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android