关于联动N级联动菜单实现原理：
1: 链表原理
2：js对象的封装
具体实现代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>N级联动菜单</title>
</head>
<body>
<select name="province" id="province" onchange="sb.nextadd(this)">
</select>
<select name="city" id="city" onchange="sb.nextadd(this)">
</select>
<select name="county" id="county">
</select>
<script language="JavaScript" src="SelectBuilder.js">
</script>
<script type="text/javascript">
var citys = [{
code: "A001",
lable: "河南省",
fcode: ""
}, {
code: "B001",
lable: "郑州市",
fcode: "A001"
}, {
code: "B002",
lable: "濮阳市",
fcode: "A001"
}, {
code: "C001",
lable: "巩义县",
fcode: "B001"
}, {
code: "C002",
lable: "南乐县",
fcode: "B002"
}, {
code: "C003",
lable: "濮阳县",
fcode: "B002"
}, {
code: "G001",
lable: "河北省",
fcode: ""
}];
var level = [{
id: "province",
value: "A001"
}, {
id: "city",
value: "B001"
}, {
id: "county",
value: "C001"
}];
var sb= new SelectBuilder(citys, level);
sb.init();
</script>
</body>
</html>
SelectBuilder.js代码：
//lgd 2010-06-02,N级联动的实现
//lgd 2010-06-02,N级联动的实现
var defaultOptions = {
code: "",
lable: "请选择"
};
var HtmlDomUtil = {
createOption: function(value, label){
var _opt = document.createElement("option");
_opt.text = label;
_opt.value = value;
return _opt;
},
getSelectById: function(id){
return document.getElementById(id);
}
};
var SelectBuilder=function(citys, level){
this.citys = citys;
this.level = level;
}
SelectBuilder.prototype = {
init: function(){
var firstLevel = this.level[0];
var _select = HtmlDomUtil.getSelectById(firstLevel.id);
for (var i = 0; i < this.citys.length; i++) {
if (this.citys[i].fcode == "") {
var opt = HtmlDomUtil.createOption(this.citys[i].code, this.citys[i].lable);
//ie ff通用的方法
_select.options.add(opt);
}
}
this.nextadd(_select);
},
nextadd: function(currentyObj){
var _curValue = currentyObj.value;
//根据当前的选择的下拉列表框的ID来获取下一个下拉列表框的ID
var _nextId = this.getNextSelectId(currentyObj.id);
if (_nextId != "") {
this.clear(_nextId);
}
var index = this.getNextSelectIndex(currentyObj.id);
for (var i = index + 1; i < this.level.length; i++) {
var _nextObj = HtmlDomUtil.getSelectById(this.level[i].id);
var _upObj = HtmlDomUtil.getSelectById(this.level[i - 1].id);
//defaultOptions
var opt = HtmlDomUtil.createOption(defaultOptions.code, defaultOptions.lable);
try{
//if ie 执行
_nextObj.add(opt);
}catch(e){
//firefox执行
_nextObj.options.add(opt);
}
for (var k = 0; k < this.citys.length; k++) {
if ((this.citys[k].fcode == _upObj.value) && (this.citys[k].fcode) != "") {
var _opt = HtmlDomUtil.createOption(this.citys[k].code, this.citys[k].lable);
try{
_nextObj.add(_opt);
}catch(e){
_nextObj.options.add(_opt);
}
if (_opt.value == this.level[i].value) {
_opt.selected = true;
}
}
}
}
},
getNextSelectId: function(id){
for (var i = 0; i < this.level.length; i++) {
if (this.level[i].id == id) {
if (!((i + 1) >= this.level.length)) {
return this.level[i + 1].id;
}
}
}
return "";
},
getNextSelectIndex: function(id){
for (var i = 0; i < this.level.length; i++) {
if (this.level[i].id == id) {
return i;
}
}
return -1;
},
clear: function(clearId){
var _nextIndex = this.getNextSelectIndex(clearId);
for (var i = _nextIndex; i < this.level.length; i++) {
var _tmpId = this.level[i].id;
var _clearObj = HtmlDomUtil.getSelectById(_tmpId);
var _opts = _clearObj.options;
for (var k = _opts.length - 1; k > -1; k--) {
_clearObj.removeChild(_opts[k]);
}
}
}
}
分享到：
相关推荐
### JS+ASP 二级联动菜单实现原理与代码解析 #### 一、背景介绍 在Web开发中，为了提高用户体验和页面交互性，开发者经常会使用到动态加载数据的技术。其中，“二级联动菜单”就是一个典型的应用场景，它常用于展示...
综上所述，AJAX-N级联动是通过监听用户操作，使用AJAX技术动态获取和更新页面内容，实现各级菜单间的相互影响。理解和掌握这一技术，对于提升Web应用的交互性和效率具有重要意义。通过不断实践和优化，我们可以创建...
5. 扩展性：为了实现N级联动，可以在事件处理函数中加入递归逻辑。当处理完当前级别的联动后，检查是否还有下一级，若有则继续处理，直至无更多级为止。 四、示例代码 以下是一个简单的3级下拉联动的jQuery实现： ...
linkedSelect.js是一款基于Jquery的小型插件，它实现了多级联动效果，适用于快速构建N级联动的下拉菜单。以下是该插件的核心思路： 1. **初始化设置**：在页面加载时，我们需要对每个需要联动的select元素进行初始...
**Ajax N级联动数据库版**是一种前端与后端交互的技术实现，主要应用于多级选择下拉菜单，如省、市、县的选择。这种技术利用Ajax（异步JavaScript和XML）来实现在不刷新整个页面的情况下，动态更新部分网页内容。在...
### 年、月、日三级联动下拉菜单的实现原理及代码解析 #### 一、概述 在网页应用中，为了提高用户体验并简化用户输入，经常需要实现年、月、日三级联动的选择功能。这种功能通常用于表单中的日期选择器，通过下拉...
本文实例讲述了JS实现的五级联动菜单效果。分享给大家供大家参考，具体如下： js实现多级联动的方法很多，这里给出一种5级联动的例子，其实可以扩展成N级联动,在做项目的时候碰到了这样一个问题但是有不能从数据库中...
这个示例代码展示了如何使用JavaScript实现一个三级联动菜单的效果。在网页设计中，联动菜单常用于地区选择、产品分类等场景，用户的选择会直接影响下一级菜单的内容。在这个例子中，我们有三个级别的选择：省份、...
在React开发中，二级联动是一种常见的交互效果，通常用于下拉菜单、地区选择等场景，让用户能够通过选择一级选项来筛选或展示二级选项。本文将详细介绍如何使用JavaScript和React实现二级联动，特别是左右联动的效果...
在IT领域，"三级联动"是一种常见的用户界面交互设计，主要应用于下拉选择框或级联菜单中。这种设计通常涉及到三个层次的数据关联，如在本例中的“全球国家，省份，城市”，用户在选择一个国家后，省份的选项会根据所...
8. **国际化（i18n）支持**：作为"全球的"省级联动菜单，很可能需要支持多语言。这就需要在代码中实现国际化功能，使得菜单能够根据用户的选择显示相应的语言。 综上所述，"很super的省级联动菜单全球的"可能是一个...
本示例中的"jquery省市三级联动.rar"是一个使用jQuery实现的省市三级联动效果的示例代码。这个功能常用于网页上的地址选择，用户在选择省份后，下拉菜单会自动更新为对应省份的城市，接着选择城市后，再次更新为该...
在UI设计上，这个demo需要创建清晰易用的交互界面，包括三级联动的下拉菜单，以及可能的搜索功能。良好的用户体验设计是提高用户满意度的关键。 最后，对于国际化的支持，这个项目可能使用i18n（国际化）框架，如...
在给定的资源中，我们看到一个名为`linkedSelect.js`的文件，这很可能是一个JavaScript实现的N级联动下拉列表控件。JavaScript是网页动态交互的核心，用于处理用户输入、更新DOM（文档对象模型）以及与其他脚本或...
PHP+MySQL实现三级联动菜单功能涉及到数据库设计、PHP编程、前端页面设计以及JavaScript的交互逻辑等多个方面。下面将详细介绍这些知识点。 **知识点一：数据库设计** 在三级联动菜单中，数据库是核心。首先需要...
此资源“ASP源码—ajax n级联动数据库版(带后台和省市县数据库) utf-8.zip”显然是一个使用ASP技术构建的Web应用程序，它利用了AJAX（Asynchronous JavaScript and XML）技术来实现多级联动下拉菜单。这种联动效果...
在本文中，我们将深入探讨如何使用JavaScript实现日期三级联动下拉框选择菜单，特别关注年、月、日的三级联动功能。这种功能在许多网页表单中非常常见，特别是在用户需要输入生日或特定日期时。下面，我们将逐步解析...
标题中的“N级级联Google式下拉选单”指的是一个基于jQuery的插件，它模仿了Google搜索框中的级联下拉菜单效果，并且能够扩展到任意多级（N级），提供用户更加灵活和丰富的选择体验。这种设计通常用于在输入框中辅助...