这篇文章主要介绍了js实现的下拉框二级联动效果,涉及JavaScript针对页面元素的遍历与节点操作相关技巧,需要的朋友可以参考下
本文实例讲述了js实现的下拉框二级联动效果。分享给大家供大家参考，具体如下：<script language="JavaScript" type="text/javascript">
<!--
/*
* 说明：将指定下拉列表的选项值清空
* 转自：Gdong Elvis ( https://www.doczj.com/doc/6e2092392.html, )
*
* @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压缩/格式化/加密工具：https://www.doczj.com/doc/6e2092392.html,/code/jscompress
上面这款js工具中的加密功能可实现js代码的eval函数加密形式，对此本站还提供了如下这款针对eval函数加密的解密工具，非常强大实用！
js的eval方法在线加密解密工具：https://www.doczj.com/doc/6e2092392.html,/password/evalencode
希望本文所述对大家JavaScript程序设计有所帮助。
excel应用场景：多级联动下拉列表实现选择一级部门下的二 级部门 很多小伙伴们都知道，利用数据有效性功能做一个下拉列表，可以让用户从列表中选择选项，避免手工输入造成的错误。但是你们知道如何做一个多级联动下拉列表吗？先让我介绍一下，什么叫多级联动下拉列表。例如，公司里面的部门，分为一级部门，二级部门等。要求用户在选择了一个一级部门后，在二级部门中，只能选择一级部门对应的那些二级部门。最终效果我们就以上面这个例子开始，向小伙伴们，演示一下如何做这样一个多级联动下拉列表。动画演示解析：首先，分别定义了[市场部]和[信息研发部]名称，来管理各自对应的二级部门。然后，在数据有效性中，指定一级部门的数据序列来源于{B1：C1}最后，在数据有效性中，指定二级部门的数据序列来源于Indirect(D8)，快速适用公式到其他二级部门单元格中。这里只有一点要说明一下，那就是Indirect(D8)的作用。Indirect(D8)的执行细节，如下图：Indirect函数解析附：Indirect(ref)函数的定义：返回文本字符串ref所指定的引用扩展：如果是三级联动，例如下图中的例子，怎么做呢？最终效果请看动画演示效果：动画效果三级部门联动原理和二级部门联动的例子是一样的。最后总结一下，这一期的主要内容是联动下拉列表的实现，包括二级
联动以及三级联动。用到的主要功能点是：在名称管理器中创建名称来管理对应的单元格区域，以及通过Indirect函数去查找地址对应的实际引用（相当于二次查找）。欢迎大家观看，转发，并留下宝贵意见，谢谢。本文是[谈谈生活谈谈职场]的原创，如要转载，请联系作者。关键词：Excel 联动下拉列表，Excel 联动下拉框，Indirect。
PHP+MySQL实现二级联动下拉列表 1.Javascript在下拉列表的各个对象 2.案例代码 Liandong.php