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