这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现的下拉框二级联动效果, 涉及 JavaScript 针对页面元素的遍历与节点操作相关技巧, 需要的朋友可以参考下
本文实例讲述了 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>
- 市
PS:这里再为大家推荐一款非常好用的 JavaScript 压缩、格式化与加密工具,功能非常强大:
上面这款 js 工具中的加密功能可实现 js 代码的 eval 函数加密形式,对此本站还提供了如下这款针对 eval 函数加密的解密工具,非常强大实用!
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0718/266066.html