特点：通用性强、实现了script和html分离

废话少说、文档就不给了。想研究代码的看我以前的一篇blog

一、文件及源码
cs.js
用函数和类两种方法实现，调用时只要调用一种就可以了。

<!--
/**
?* Function to setup a CascadeSelect
?* @version build 20060324
?* @author? KimSoft (jinqinghua [at] gmail.com)
?* @update
?*/

/**
?* setupCascadeSelect
?* @param cascadeSelect select object
?* @param parent data index of parent
?* @param nodes array contains data with structure [[parent, text, value],[],...[]]
?* @param [optional] is onchange
?*/
function setupCascadeSelect(cascadeSelect, parent, nodes, isOnChange) {
? if (isOnChange == null){
??? isOnChange = false;
? }
? cascadeSelect.onchange = function (){
??? setupCascadeSelect(this, this.options[this.selectedIndex].value, nodes, true);
? };
? cascadeSelect.getAttr = function (attrName) {
??? return this[attrName] ? this[attrName] : this.getAttribute(attrName);
? };
? cascadeSelect.getElementById = function (id) {
??? return this.form.elements[id] ? this.form.elements[id]: document.getElementById(id);
? };
? cascadeSelect.setDisplayStyle = function(value) {
??? if (!this.multiple){
????? this.style.display = value;
??? }
??? var subElement = this.getElementById(this.getAttr("subElement"));
??? if (subElement != undefined){
????? subElement.setDisplayStyle = this.setDisplayStyle;
??? }
? };
? nodes.getChildNodesByParent = function (parent) {
??? var childNodes = new Array();
??? if (parent + "" == ""){
????? return childNodes;
??? }
??? for (var i = 0; i < nodes.length; i++){
????? if (nodes[i][0] != undefined && nodes[i][0] == parent){
??????? childNodes[childNodes.length] = nodes[i];
????? }
??? }
??? return childNodes;
? }

? if(!isOnChange){
??? cascadeSelect.options.length = 0;
??? var defaultText = cascadeSelect.getAttr("defaultText");
??? var defaultValue = cascadeSelect.getAttr("defaultValue");
??? var selectedValue = cascadeSelect.getAttr("selectedValue");

??? if (defaultText != undefined && defaultValue != undefined){
????? cascadeSelect.options[cascadeSelect.options.length] = new Option(defaultText, defaultValue);
??? }
??? var childNodes = nodes.getChildNodesByParent(parent);
??? for (var i = 0; i < childNodes.length; i++){
????? cascadeSelect.options[cascadeSelect.options.length] = new Option(childNodes[i][1], childNodes[i][2]);
????? if (selectedValue != undefined && selectedValue == childNodes[i][2]){
??????? cascadeSelect.selectedIndex = cascadeSelect.options.length - 1;
????? }
??? }
? }

? if (cascadeSelect.options.length > 0){
??? cascadeSelect.setDisplayStyle("");
??? var subElement = cascadeSelect.getElementById(cascadeSelect.getAttr("subElement"));
??? if (subElement != undefined){
????? setupCascadeSelect(subElement, cascadeSelect.options[cascadeSelect.selectedIndex].value, nodes, false);
??? }
? } else {
??? cascadeSelect.setDisplayStyle("none");
? }
}

/**
?* 以类的方法实现连动
?*/
function CascadeSelect(element, parent, nodes){
? this.form = element.form;
? this.nodes = nodes;
? this.attributes = {
??? "subElement"??? : "subElement",
??? "defaultText"?? : "defaultText",
??? "defaultValue"? : "defaultValue",
??? "selectedValue" : "selectedValue"
? }
? this.build(element, parent, false);
}

CascadeSelect.prototype.getElementById = function (id) {
??? return this.form.elements[id] ? this.form.elements[id]: document.getElementById(id);
};

CascadeSelect.prototype.getAttribute = function (element, attrName) {
??? return element[attrName] ? element[attrName] : element.getAttribute(attrName);
};

CascadeSelect.prototype.getChildNodesByParent = function (parent) {
??? var childNodes = new Array();
??? if (parent + "" == ""){
????? return