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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
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 缓存实现代码及详细注释
2010/05/16 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
js 走马灯简单实例
2013/11/21 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python内存管理实例分析
2019/07/10 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python绘制高斯曲线
2021/02/19 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
学校联谊活动方案
2014/02/15 职场文书
法人授权委托书样本
2014/09/19 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
总账会计岗位职责
2015/04/02 职场文书