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 相关文章推荐
js传值 判断
Oct 26 Javascript
用javascript操作xml
Nov 04 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
Vue实现验证码功能
Dec 03 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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使用数组实现队列
2012/02/05 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python logging日志模块的详解
2017/10/29 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python callable内置函数原理解析
2020/03/05 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
python中添加模块导入路径的方法
2021/02/03 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
总裁助理岗位职责
2014/02/17 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
社区禁毒工作方案
2014/06/02 职场文书
工作证明格式及范本
2014/09/12 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
如何Tomcat中使用ipv6地址
2022/05/06 Servers