多级联动

DoubleSelect方法
作用:
观察左边select的onchange事件
触发时传递给eventHandler一个函数和左边select的value值
调用这个函数并传递二维数组,初始化右边的select,二维数组格式[[text,value],[text,value]...]
注：调用DoubleSelect后，会默认触发左边select的onchange事件(参数里可设置阻止)

DoubleSelect方法接受参数为json
json属性为
left 必选 左边select的element引用
right 必选 右边select的element引用
handler 必选 eventHandler(handler, value)
leftDefault 可选 左边select的默认值
rightDefault 可选 右边select的默认值
length 可选 触发事件执行传递的handler后，把右边select的长度恢复到多少（作用，保留自定义默认项）
cancelEvent 可选 是否阻止默认触发左边select的onchange事件

此方法把数据和select的处理分离
所以可以根据需求在进行数据的封装 
以下是一个三级联动的例子

 

<script type="text/javascript">//<![CDATA[
var DoubleSelect = function (param) {

    var fireEvent = function (target, name) {
        if (target.fireEvent) {
            target.fireEvent('on' + name);
        } else if (target.ownerDocument.createEvent) {
            var e = target.ownerDocument.createEvent('HTMLEvents');
            e.initEvent(name, false, false);
            target.dispatchEvent(e);
        }
    };

    var onChangeEvent = function (event) {
        var right = param.right;
        var handler = function (items) {
            window.setTimeout(function () {
                try {
                    var i = right.options.length = length, n = 0;
                    for (; n < items.length ; ++i, ++n) {
                        right.options[i] = new Option(items[n][0], items[n][1]);
                    }
                    window.setTimeout(function () { //opera 9.1
                        if (('rightDefault' in param)) {
                            if (right.value != param.rightDefault.toString()) {
                                right.value = param.rightDefault;
                            }
                            delete param.rightDefault;
                        }
                        fireEvent(right, 'change');
                    }, 1);
                } catch (exp) {}
            }, 1);
        };
        param.handler(handler, param.left);
    };

    var left = param.left;
    var length = param.length || 0;

    if (left.addEventListener) {
        left.addEventListener('change', onChangeEvent, false);
    } else if (left.attachEvent) {
        left.attachEvent('onchange', onChangeEvent);
    }

    if ('leftDefault' in param) {
        left.value = param.leftDefault;
        delete param.leftDefault;
    }
    if (!param.cancelEvent) {
        fireEvent(left, 'change');
    } else {
        delete param.cancelEvent;
    }
};
//]]></script>
<select id="a">
<option value="">无</option>
<option value="0">1</option>
</select>
<select id="b">
<option value="">无</option>
</select>
<select id="c">
<option value="">无</option>
</select>
<script type="text/javascript">//<![CDATA[
DoubleSelect({
    handler : function (handler, left) {
        //callback
        handler([[0, 1]]);
    }
    , left : document.getElementById('a')
    , right : document.getElementById('b')
    , leftDefault : '0'
    , rightDefault : '1'
    , length : 1
});

DoubleSelect({
    handler : function (handler, left) {
        //callback
        handler([[1, 0]]);
    }
    , left : document.getElementById('b')
    , right : document.getElementById('c')
    , length : 1
    , rightDefault : '0'
    , cancelEvent : true
});
//]]></script>