多个列表框联动，不算是啥大问题，但是却挺麻烦，那么怎么才能够尽量方便一点呢？网上搜了一下，没发现太好用的，于是就自己写了一个。基于jQuery，无限级联动，支持下拉列表框和列表框。
先说一下步骤和使用方法：
1、在页面里设置列表框
城市：<select name="c5118020" id="ctrl_001" > <option value="-99999">请选择</option><option value="1">沈阳</option><option value="2">抚顺</option><option value="3">鞍山</option><option value="4">营口</option><option value="5">大连</option> </select><br/> 区县：<select size="1" name="c5118030" id="ctrl_002"> <option value="1">请先选择城市</option> </select><br/> 街道：<select id="ctrl_003" name="c5118040" > <option value="1">请先选择区县</option> </select><br/> 社区：<select id="ctrl_004" name="c5118050" > <option value="1">请先选择街道</option> </select>
排版布局可以随意设定，id、name、css等都没有任何限制。
2、引用js
<script language="javascript" type="text/javascript" src="nature.head.js"></script> <script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script> <script language="javascript" type="text/javascript" src="Nature.Control.Base.js"></script> <script language="javascript" type="text/javascript" src="Nature.Control.Base.UnionList.js"></script>
3、设置联动列表框的属性和事件
var uLst; window.onload = function () { //定义需要的属性 var lstEvent = { lstObjects: [$("#ctrl_001"), $("#ctrl_002"), $("#ctrl_003"), $("#ctrl_004")], //联动列表的集合，数组形式 ajaxPara: [{}, {}, {}, {}], //访问ajax的参数，结构可以自行定义，联动列表框只负责传递 //列表框的change事件。 //selectValue：列表框选择的值， //lst：下一个列表框的对象， //ajaxPara：调用下一个列表框需要的参数 //callback：回调函数，触发列表框的change事件，也可以直接写lst.change(); lstChange: function (selectValue, lst, ajaxPara, callback) { //alert(selectValue); //alert(lst); /* 模拟操作。您可以根据自己的需求改成ajax的方式，ajaxPara：调用下一个列表框需要的参数 如果采用ajax的方式来获取记录集，那么请在数据请求完毕之后，并且绑定列表框之后再调用callback */ lst.append("<option value='" + selectValue + "_1'>" + selectValue + "_text1</option>"); lst.append("<option value='" + selectValue + "_2'>" + selectValue + "_text2</option>"); lst.append("<option value='" + selectValue + "_3'>" + selectValue + "_text3</option>"); lst.append("<option value='" + selectValue + "_4'>" + selectValue + "_text4</option>"); callback(lst); } }; //实例基础控件 var baseCtrl = new Nature.Controls.BaseControl({}); //创建联动列表框 uLst = baseCtrl.UnionList(lstEvent); };
lstEvent 属性说明
lstObjects：数组形式，里面存放列表框，请注意先后顺序，第一级放在第一位，第二级放在第二位，以此类推。顺序不能弄错。
ajaxPara：大多数联动，都是用ajax的方式来获取选项，使用ajax就需要一些参数，那么可以把需要的参数放在这里，然后在change事件里，可以得到对应的列表框的选项需要的参数。
lstChange：任何一个列表框的选项发生变化，都会触发这个事件，在这里可以实现填充下一个列表框的选项。由于大部分获取选项都是使用ajax异步的方式，所以设置了一个回调函数，这样在ajax获取选项之后，可以通过callback的方式来回调，也就是触发下一个列表框的change事件。
=========================================
基本情况就是这样了。然后在说一下如何获取列表框的选项。
获取列表框的选项（option、item）有很多很多种方法，记录集的格式也是千差万别，所以也没法集合到联动列表框内部。另外本着单一职责和低耦合的原则，还有更通用一点的需求，也是应该把获取列表框的选项的功能放在外部处理。
在页面里直接获取选项，可以用ajax，也可以用其他的方式。由于没有把这个功能放在内部实现，所以就做了一个很简单的演示，模拟一个假数据。根据上一个列表框的选择值，来设定下一个列表框的text。这样是想有一个比较明显的区分。
最后是在线演示
ps：
1、优缺点
优点是比较通用，能够方便一点点。缺点是，还是太麻烦。
做完了自后，有重新想了一遍，这么做比直接实现到底有啥区别呢？好像也没啥大的区别嘛，哈哈。怪不得网上没啥知名的联动列表框呢，原来这个东东比较鸡肋，哈哈。
2、有待完善的地方
其实联动列表框的难点不是如何联动，而是如何设置默认选项。比如在修改记录时，字段值是 沈阳市、和平区、某某街道、某某社区，那么就应该把列表框的默认选项给设置上。但是选项是动态生成的，而且还是ajax获取的，这个问题想了好几天，截止到现在才有了一个明确的思路。不知道您有没有什么好的办法。