cxSelect多级省市区联动插件

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引入cxselect无限联动插件：

<script src="js/jquery.cxselect.js"></script>

演示一：默认效果

<dl id="city_china" class="row">
    <dt>省份</dt>
    <dd><select class="province select"></select></dd>
    <dt>城市</dt>
    <dd><select class="city select"></select></dd>
    <dt>地区</dt>
    <dd><select class="area select"></select></dd>
</dl>

$.cxSelect.defaults.url = 'js/cityData.min.json';
$('#city_china').cxSelect({
    selects: ['province', 'city', 'area']
});

演示2：全球主要国家城市联动 http://www.sucaihuo.com/jquery/5/574/demo/demo_global.html

<fieldset id="global_location" data-url="js/globalData.min.json">
    <p>所在地区：
        <select class="country select" data-first-title="选择国家"></select>
        <select class="state select"></select>
        <select class="city select"></select>
        <select class="region select"></select>
    </p>
</fieldset>

$('#global_location').cxSelect({
    selects: ['country', 'state', 'city', 'region'],
    nodata: 'none'
});

演示三：自定义选项http://www.sucaihuo.com/jquery/5/574/demo/demo_custom.html

<fieldset id="custom_data">
    <legend>支持各种类型的数据</legend>
    <div class="form">
        <dl class="row">
            <dt>一</dt>
            <dd><select class="first select"></select></dd>
            <dt>二</dt>
            <dd><select class="second select"></select></dd>
            <dt>三</dt>
            <dd><select class="third select"></select></dd>
            <dt>四</dt>
            <dd><select class="fourth select"></select></dd>
            <dt>五</dt>
            <dd><select class="fifth select"></select></dd>
        </dl>
    </div>
</fieldset>

$('#custom_data').cxSelect({
    selects: ['first', 'second', 'third', 'fourth', 'fifth'],
    required: true,
    jsonValue: 'v',
    url: [
        {'v': '1', 'n': '第一级 >', 's': [
                {'v': '2', 'n': '第二级 >', 's': [
                        {'v': '3', 'n': '第三级 >', 's': [
                                {'v': '4', 'n': '第四级 >', 's': [
                                        {'v': '5', 'n': '第五级 >', 's': [
                                                {'v': '6', 'n': '第六级 >'}
                                            ]}
                                    ]}
                            ]}
                    ]}
            ]},
        {'v': 'test number', 'n': '测试数字', 's': [
                {'v': 'text', 'n': '文本类型', 's': [
                        {'v': '4', 'n': '4'},
                        {'v': '5', 'n': '5'},
                        {'v': '6', 'n': '6'},
                        {'v': '7', 'n': '7'},
                        {'v': '8', 'n': '8'},
                        {'v': '9', 'n': '9'},
                        {'v': '10', 'n': '10'}
                    ]},
                {'v': 'number', 'n': '数值类型', 's': [
                        {'v': 11, 'n': 11},
                        {'v': 12, 'n': 12},
                        {'v': 13, 'n': 13},
                        {'v': 14, 'n': 14},
                        {'v': 15, 'n': 15},
                        {'v': 16, 'n': 16},
                        {'v': 17, 'n': 17}
                    ]}
            ]},
        {'v': 'test boolean', 'n': '测试 Boolean 类型', 's': [
                {'v': true, 'n': true},
                {'v': false, 'n': false}
            ]},
        {v: 'test quotes', n: '测试属性不加引号', s: [
                {v: 'quotes', n: '引号'}
            ]},
        {v: 'test other', n: '测试奇怪的值', s: [
                {v: '[]', n: '数组（空）'},
                {v: [1, 2, 3], n: '数组（数值）'},
                {v: ['a', 'b', 'c'], n: '数组（文字）'},
                {v: new Date(), n: '日期'},
                {v: new RegExp('\\d+'), n: '正则对象'},
                {v: /\d+/, n: '正则直接量'},
                {v: {}, n: '对象'},
                {v: document.getElementById('custom_data'), n: 'DOM'},
                {v: null, n: 'Null'},
                {n: '未设置 value'}
            ]},
        {'v': '', 'n': '无子级'}
    ]
});