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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
element-ui的回调函数Events的用法详解
Oct 16 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 date()日期时间函数详解
2010/05/16 PHP
php xml 入门学习资料
2011/01/01 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript中的this详解
2014/12/08 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Ref与out有什么不同
2012/11/24 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
交通事故被告答辩状
2015/05/22 职场文书
小学六年级毕业感言
2015/07/30 职场文书