JS实现三级联动功能

1、使用传统的key，Value的方法：

<div id="page">
    <select id="province">
    </select>
</div>

<script type="text/javascript">
    $(function () {
        //数据源
        var data = {
            //省
            data_province: {
                "0": "北京省",
                "1": "上海省",
                "2": "浙江省"
            },
            //市
            data_city: {
                "0": [{ value: '0', name: "北京市"}],
                "1": [{ value: '0', name: "上海市"}],
                "2": [{ value: '0', name: "宁波市" }, { value: '1', name: "杭州市" }, { value: '2', name: "温州市"}]
            },
            //地区
            data_area: {
                '00': [{ value: "0", name: "北京1区" }, { value: "1", name: "北京2区" }, { value: "2", name: "北京3区"}],
                '10': [{ value: "0", name: "上海1区" }, { value: "1", name: "上海2区" }, { value: "2", name: "上海3区"}],
                '20': [{ value: "0", name: "宁波1区" }, { value: "1", name: "宁波2区" }, { value: "2", name: "宁波3区"}],
                '21': [{ value: "0", name: "杭州1区" }, { value: "1", name: "杭州2区" }, { value: "2", name: "杭州3区"}]
            }
        }

        //.
        var _p = $('#province'),
            sel_city, sel_area;

        var dropDown = {
            init: function (type, key) {
                this.html('');
                this.append('<option value="-1">请选择</option>');
                if (key > -1) {
                    var d = data[type][key];
                    for (var i = 0; i < d.length; i++) {
                        this.append('<option value="' + d[i].value + '">' + d[i].name + '</option>');
                    }
                }
            }
        }

        //省
        _p.append('<option value="-1">请选择</option>');
        for (var i in data.data_province) {
            _p.append('<option value="' + i + '">' + data.data_province[i] + '</option>');
        }
        //
        $('#page').on('change', '#province', function () {
            var _key = $(this).val();
            if (!sel_city) {
                sel_city = $('<select id="city"></select>');
                _p.after(sel_city);
            }
            dropDown.init.call(sel_city, "data_city", _key);
        })
        //
        $('#page').on('change', '#city', function () {
            var _key = _p.val() + $(this).val();
            if (!sel_area) {
                sel_area = $('<select id="area"></select>');
                sel_city.after(sel_area);
            }
            dropDown.init.call(sel_area, "data_area", _key);
        })

    });
</script>