`
wanchong998
  • 浏览: 236060 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

精简的无限级联动select 自己在做一点改动

    博客分类:
  • J2EE
阅读更多
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
/*
* 说明:将指定下拉列表的选项值清空
* 作者:CodeBit.cn ( http://www.CodeBit.cn )
** @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;
}
}

/*
* 说明:设置传入的选项值到指定的下拉列表中
* 作者:CodeBit.cn ( http://www.CodeBit.cn )
*
* @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>
<body>
<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> 市
</body>
</html>
分享到:
评论

相关推荐

    js二级联动_精简实用版

    在JavaScript编程中,二级联动是一种常见的交互效果,通常用于实现如省市区选择、类别筛选等场景。本资源“js二级联动_精简实用版”提供了一个简洁高效的解决方案,适用于需要快速集成到项目中的开发者。 首先,...

    操作说明 (精简版) SITOP select[手册].pdf

    当输出端口电流超过阈值后,SITOP Select会在一段时间后自动断开输出,保护电路不受损害。断电后,通过按下复位按钮可以重新激活输出端口。这个复位按钮同样可以用来设置开机延迟。 6. 开机延迟功能: 复位按钮不仅...

    实例省级联动 精简版

    "实例省级联动 精简版" 提供了一个简洁且易于应用的解决方案,允许用户在选择省份后,下拉菜单会自动更新对应的城市选项,确保数据的实时性和准确性。 省级联动实例的核心在于动态数据加载和下拉菜单的联动效果。...

    javascript省市区三级联动菜单(精简好用)

    在网页开发中,有时我们需要实现一个功能,让用户在选择省份时,对应的下拉菜单自动更新为该省份的城市,再选择城市后,下拉菜单再次更新为该城市下的区县。这种交互效果通常被称为“三级联动菜单”。在这个场景下,...

    jQuery模拟select下拉框三级城市联动代码.zip

    在网页开发中,"jQuery模拟select下拉框三级城市联动代码"是一种常见的交互设计,用于实现用户在选择一级城市后,自动更新二级城市列表,接着选择二级城市后,再动态加载三级城市的联动效果。这种技术提高了用户体验...

    【省市】js二级联动_精简实用版

    在IT行业中,"省市js二级联动"是一种常见的前端交互功能,尤其在网页表单设计时,用于用户选择省市区信息。这种功能通过JavaScript实现,能够根据用户选择的省份动态加载对应的市区列表,提供了良好的用户体验。下面...

    信息系统项目管理师考试必过神之冲刺背诵口诀精简黄色版(自己整理)

    信息系统项目管理师考试必过神之冲刺背诵口诀精简黄色版(自己整理) 信息系统项目管理师考试神器,帮助了无数的人顺得地记住考点,通过考试。 信息系统项目管理师考试必过神之冲刺背诵口诀精简黄色版(自己整理)...

    YMDClass年月日三级联动纯JS封装类精简插件

    总结起来,"YMDClass年月日三级联动纯JS封装类精简插件"是一个高效、轻量级的日期选择解决方案,适用于那些希望在不依赖外部库的情况下提供良好用户体验的网页开发者。通过简单的配置和调用,开发者可以轻松地在他们...

    Win 7精简教程+精简工具RT 7 Lite的精简配置方案+手动精简方案

    本压缩包包含三个文件: ...注意的是RT 7 Lite的配置文件是我经过自己测试的出来的,在我目前理解的范围内所能进行的最大精简!绝对不是网上那些垃圾配置文件,随便改一改就赚点分,鄙视那样的人!

    js无限级折叠菜单精简版

    在当前的Web开发中,创建一个无限级折叠菜单是一个常见的需求,特别是对于那些需要以层级形式展示内容的网站来说。本次解析的案例是一个简单的JavaScript实现的无限级折叠菜单,它允许开发者通过纯JavaScript来实现...

    自己动手精简你的jre到做小

    自己动手精简我们jre,再打包成exe这样java程序就可以在windows下很好的运行了,而且jre体积也很小不影响下载!感兴趣的可以下载后动手精简一下你的jre,我的精简到了2M以内,做成exe后根本看不出来是java做的。里面...

    xp精简版65M

    【描述】"极度精简,需要自己下载所需驱动程序。老机子使用的福音。"这说明该XP精简版在制作过程中删除了大量的非核心组件和服务,以减少系统占用的空间,提高系统的运行效率。由于进行了大量的精简,可能不包含一些...

    VB6.0精简版

    在精简版中,VB6.0的窗体设计工具依然可用,开发者可以轻松创建各种用户界面,包括菜单、按钮、文本框、列表框等控件,通过设置控件属性和编写事件处理代码,实现交互式的应用程序。此外,VB6.0的集成开发环境(IDE...

    精简的jre和精简过程

    最近在写一个小程序,jre1.8.0_181整整有199mb,对于一个只有400多k的程序来说,完全没必要,于是就进行精简,把jre精简到40M、左右,程序也能正常运行。如果你急需使用精简的jre,可以下载试试。

    VS2010绿色精简

    【标题】:“VS2010绿色精简”是指Visual Studio 2010的精简版,这种版本通常是为了方便用户快速安装和使用而设计的。与完整版相比,它去除了许多非核心功能...用户在选择时应根据自己的实际需要来决定是否使用精简版。

    WIN10专业版64位22H2正式版适度精简母盘NTLite精简配置文件

    NTLite是一款强大的Windows定制工具,允许用户在安装前精简操作系统,删除不必要的组件,从而减少硬盘占用,提高系统运行效率。通过NTLite,用户可以自定义安装设置,如语言、驱动程序、服务、更新、甚至集成额外的...

    超级精简版的jre

    - **兼容性**:精简版JRE可能会导致一些依赖于完整JRE功能的第三方库无法正常工作,因此在部署前需要确保所有依赖都能在精简版上运行。 - **更新维护**:由于精简版JRE可能没有官方更新,因此需要自行关注安全漏洞并...

    自己做的mysql精简版,已含maridb,4个版本才10M

    自己做的mysql精简版,已含maridb,4个版本才10M。平均每个版本不足3M,还包含最新版maridb的精简版,包括日志查看器,内附自己编写的mysql管理器,可以实现非常多的管理功能,虽然是批处理,但是很绿色,解压即可...

    CAJViewer绿色精简版

    在使用CAJViewer绿色精简版时,用户需确保自己的电脑系统环境满足软件运行的基本要求,例如兼容的操作系统版本和必要的运行库。由于是精简版,可能不包含所有原版的功能,因此在遇到问题时,用户可能需要寻找替代...

Global site tag (gtag.js) - Google Analytics