`
topcloud
  • 浏览: 8235 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

我所用到的一个“下拉列表多级联动”

阅读更多
JavaScript代码

/**
  下拉列表多级联动处理函数
*/
function ChangeSelectList(inputObject, valueObject, levelId) {
for(var i=0; i<levelId.length; i++) {
if(inputObject.id == levelId[i]) {
thisIndex = i;
break;
}
}
nextIndex = parseInt(thisIndex) + 1;
thisValue = inputObject.value;

if(valueObject[thisValue] != undefined){
var nextLevelOpt = document.getElementById(levelId[nextIndex]);

var level2Num = nextLevelOpt.length;
for(var i=0; i<level2Num; i++) {
nextLevelOpt.remove(0);
}

nextLevelOpt.add(new Option("", ""));

for(var i=0; i < valueObject[thisValue].length; i++) {
nextLevelOpt.add(new Option(valueObject[thisValue][i][0], valueObject[thisValue][i][1]));
}

for(var i=0; i<level2Num; i++) {
nextLevelOpt.selected = false;
}
nextIndex++;
}
for (var i=nextIndex; i<levelId.length; i++) {
childLevelOpt = document.getElementById(levelId[i]);

child2Num = childLevelOpt.length;
for(var j=0; j<child2Num; j++) {
childLevelOpt.remove(0);
}
childLevelOpt.add(new Option("", ""));
}
}

/*
下拉列表数据初始化
*/
sortOptObject = new Object();
// 分类数组
var sortLevelId = new Array('','sort1','sort2','sort13','sort4');

sortOptObject['1'] = new Array();
sortOptObject['1'][0] = new Array('分类10','10');
sortOptObject['1'][1] = new Array('分类11','11');
sortOptObject['1'][2] = new Array('分类12','12');
sortOptObject['1'][3] = new Array('分类13','13');
sortOptObject['1'][4] = new Array('分类14','14');

sortOptObject['2'] = new Array();
sortOptObject['2'][0] = new Array('分类20','20');
sortOptObject['2'][1] = new Array('分类21','21');
sortOptObject['2'][2] = new Array('分类22','22');
sortOptObject['2'][3] = new Array('分类23','23');

sortOptObject['3'] = new Array();
sortOptObject['3'][0] = new Array('分类','32');
sortOptObject['3'][1] = new Array('分类','33');
sortOptObject['3'][2] = new Array('分类','34');
sortOptObject['3'][3] = new Array('分类','35');

sortOptObject['10'] = new Array();
sortOptObject['10'][0] = new Array('分类100','100');
sortOptObject['10'][1] = new Array('分类101','101');

sortOptObject['100'] = new Array();
sortOptObject['100'][0] = new Array('分类1000','1000');
sortOptObject['100'][1] = new Array('分类1001','1001');


页面使用方法:
<tr>
<td>分类</td>
<td>
<select id="sort1" name="sort1" onChange="ChangeSelectList(this, sortOptObject, sortLevelId)">
<option value="">
<option value="1">分类1</option>
<option value="2">分类2</option>
<option value="3">分类3</option>
</select>

<select id="sort2" name="sort2" onChange="ChangeSelectList(this, sortOptObject, sortLevelId)">
<option value=""></option>
</select>

<select id="sort3" name="sort3" onChange="ChangeSelectList(this, sortOptObject, sortLevelId)">
<option value=""></option>
</select>

<select id="sort4" name="sort4">
<option value=""></option>
</select>
</td>
</tr>
分享到:
评论

相关推荐

    yii 下拉列表多级联动 dropDownList 地址sql文件

    http://blog.csdn.net/aa1049372051/article/details/21021001文章中用到的sql文件

    js+jsp 联动下拉列表框

    例如,在一个电子商务网站上,用户选择省份时,对应的市级下拉列表会随之更新。这种功能的实现依赖于前端JavaScript与后端JSP(Java Server Pages)的协同工作。 #### 关键技术点解析 1. **JSP页面结构**: - **%...

    简单的多级垂直手风琴下拉列表菜单

    在IT界,构建用户友好的交互界面是至关重要的,而多级垂直手风琴下拉列表菜单就是一个很好的实现方式。这种菜单设计适用于导航栏或侧边栏,它可以帮助用户高效地浏览并访问多层次的网站内容。本文将深入探讨如何利用...

    安卓三级联动省市联动多级联动相关-citylist城市列表选择器.rar

    在Android开发中,"三级联动省市联动多级联动"是一种常见的功能需求,特别是在涉及地理位置、地址选择等场景。这个功能通常涉及到三个级别的选择:国家、省份和城市,当用户选择一个上级区域时,下级区域的数据会...

    制作EXCEL三级下拉列表

    在Excel中,创建三级下拉列表是一个非常实用的功能,它能帮助用户在数据输入时保持一致性,提高工作效率。下面将详细介绍如何制作一个三级下拉列表,并以提供的"三级下拉菜单.xls"文件为例进行解析。 首先,理解三...

    下拉四级联动插件

    在实现联动下拉菜单时,HTML需要创建可交互的下拉列表,CSS则用来美化和定位这些元素。 5. **响应式设计**:为了确保在不同设备上都能良好运行,插件可能需要采用响应式设计,适应手机、平板电脑和桌面等多种屏幕...

    易语言多级联动

    在易语言中,"多级联动"是一个常见的概念,通常应用于数据筛选、下拉菜单或者树形结构的交互设计中。 多级联动的核心在于各个级别之间的关联和互动。例如,在一个组织架构中,可能有省份、城市、区县的三级联动选择...

    下拉列表框的7级联动

    总结,"下拉列表框的7级联动"是一种高效且实用的前端技术,通过合理的数据结构和前端逻辑,可以实现多级筛选和导航。理解其工作原理和实现方式,对于提升Web应用的交互性和用户体验具有重要意义。

    三级下拉列表.rar

    例如,当用户选择一级菜单的一项时,我们需要触发一个事件,这个事件会更新二级下拉列表的选项。同样,二级菜单的选择会影响三级菜单。这通常通过添加事件监听器(如`addEventListener`)并编写相应的回调函数来实现...

    js-动态添加行、多级联动、数据库SQL

    这些技术在实际开发中经常结合使用,比如动态添加行时可能需要用到多级联动,子窗口中进行数据验证后将结果返回给父窗口。熟练掌握这些知识点,将使你在JavaScript编程中更加游刃有余,能够构建出功能丰富、健壮的...

    JS+HTML联动下拉菜单

    在创建联动下拉菜单时,我们会用到`&lt;select&gt;`和`&lt;option&gt;`标签来定义下拉列表。例如: ```html &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;Option 2 &lt;!-- 子级选项将在这里动态加载 --&gt; ``...

    多级下拉菜单窗口

    5. **实现多级联动**:当用户选择一个`CheckBox`后,检查当前菜单是否还有下一级,如果有,则创建并显示新的`PopupWindow`,展示下一级菜单。这里可能需要递归调用,直到到达最底层的菜单项。 6. **关闭PopupWindow...

    三级联动源码

    这种设计常见于下拉菜单或者地区选择等场景,例如省-市-区的选择,用户在选择一个省份后,下一级的市会根据省份动态更新,接着选择市后,区县也会相应地发生变化。这种联动效果提升了用户体验,减少了不必要的用户...

    Excel三级下拉菜单

    1. 创建一个与一级菜单相同大小的区域,用于显示二级菜单的下拉列表。 2. 在这个区域的每个单元格中,使用IF函数检查左侧一级菜单的值,并根据值返回对应的二级菜单选项。 3. 使用INDIRECT函数引用包含二级菜单数据...

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

    2. 多级联动Select下拉框:多级联动是指一个表单中的多个下拉选择框根据用户的选择动态变化。通常,第一个下拉框(如省)的选择会影响第二个下拉框(如市)的选项,以此类推。这种功能可以极大地减少用户选择时的...

    里面近50个常用HTML模板,包含视频全屏前景,时间日历控件,弹出窗,覆盖层,百度地图,抽奖转盘等样式,商城源码,地市高校多级联动,各种图片滑动特效等

    "地市高校多级联动"是指在下拉菜单中,选择一个城市后,会自动加载该城市的高校列表,这需要利用JavaScript动态更新DOM,通常会用到AJAX异步请求获取数据。 "各种图片滑动特效"则是指不同的图片轮播或滑动展示方式...

    省市二级联动

    在HTML中,我们通常会用到两个下拉菜单(select元素),一个用于省份,一个用于城市。当用户在省份下拉菜单中做出选择时,JavaScript或者jQuery会监听这个事件,并触发一个函数来更新城市下拉菜单的内容。 1. **...

    ajaxpro三级联动

    在实现三级联动的过程中,我们通常会用到AjaxPro库中的`AjaxDropDownList`控件,它能够模拟客户端下拉列表的行为,同时利用Ajax进行后台数据交互。 首先,我们需要在VS2005中创建一个新的ASP.NET项目,并安装...

    sqlserver版三级联动数据库脚本

    - **原理**: 通过一系列下拉列表或选项卡,实现当前选择项依赖于上一级的选择。 - **应用场景**: 地址选择、组织架构选择等。 #### 三、实现步骤 **1. 创建省份表** 首先,我们需要创建一个省份表(`...

    无限级分类,dropdownlist分类

    在无限级分类的上下文中,下拉列表可以被设计成多级联动的形式,用户选择一个上级类别后,下级类别的列表会自动更新。这种方式减少了页面的跳转,提高了用户的操作效率。实现这种功能通常需要用到JavaScript库,如...

Global site tag (gtag.js) - Google Analytics