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

本文实例讲述了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压缩、格式化与加密工具,功能非常强大:

JavaScript压缩/格式化/加密工具:http://tools.jb51.net/code/jscompress

上面这款js工具中的加密功能可实现js代码的eval函数加密形式,对此本站还提供了如下这款针对eval函数加密的解密工具,非常强大实用!

js的eval方法在线加密解密工具:http://tools.jb51.net/password/evalencode

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2016-04-28

jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1.首先在数据库中获取第一个下拉框的数据: <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="w

javascript实现省市区三级联动下拉框菜单

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

JQuery异步加载无限下拉框级联功能实现示例

复制代码 代码如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/* JQuery异步加载无限极下拉框级联功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = "

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap">         <div class="nice-select" name="nice-select&

JQuery实现级联下拉框效果实例讲解

用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下 效果图: 逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

省市区三级联动下拉框菜单javascript版

实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat

基于jquery的无限级联下拉框js插件

灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉

jQuery实现级联下拉框实战(5)

今天来完成jQuery实战的级联下拉框效果.效果功能如下: 页面默认只提供汽车厂商,当选择了具体的某品牌汽车,汽车类型下拉框就会动态的显示出来,选择对应的类型,然后出来该汽车类型对应的轮胎类型下拉框显示出来,选中轮胎类型,页面的正中间会显示出汽车的图片. 思路分析如图: 建立我们的html页面,程序清单如下: 代码清单1.1: chainSelect.jsp <body> <div class="loading"> <p><img src=&q

jQuery+PHP+MySQL实现无限级联下拉框效果

本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下  效果图: 图1 仅下拉框 图2 层级提示+下拉框 图3 存储数据点击响应 主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Content

js+xml生成级联下拉框代码

需要默认选中时,定义一个变量 var cityId=城市id 下面是js代码 复制代码 代码如下: function readxml() { var XmlDoc = null; if (window.ActiveXObject) { XmlDoc = new ActiveXObject("Microsoft.XMLDOM"); XmlDoc.async = false; XmlDoc.load(path + "/web/common/regions.xml");

Vue.js 2.0中select级联下拉框实例

在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

php实现三级级联下拉框

这是我在网上查找到的php实现三级级联下拉框的资料,共享个大家,大家一起进步,具体内容如下 index.php: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ajax联动菜单</title> <script language="javascript"

用jQuery实现的模拟下拉框代码

很多群员问了关于下拉框美化的问题,现打一个下拉框美化的制作过程,其实是模拟出来的下拉框. 问题1:为什么要模拟下拉框? 1,浏览器自带的 下拉框样式不好看. 2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面. OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框. 第一步:先搭建好结构 这是普通的下拉框代码: XML/HTML代码 复制代码 代码如下: <select name="abc" id="abc"> <optio

Android使用Spinner实现城市级联下拉框

最近写一个使用Spinner实现城市级联下拉框的Dome,现在总结一下,第一次写博客,互相学习. activity_main.xml里面有三个Spinner <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

ASP.NET实现级联下拉框效果实例讲解

用ASP.NET控件实现部门和员工的联动,参考过程如下 效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

JS实现的简单下拉框联动功能示例

本文实例讲述了JS实现的简单下拉框联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head