JS实现三级联动功能

来源：互联网发布：辐射4 for mac 编辑：程序博客网时间：2024/05/22 11:37
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>
0 0