最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

cxSelect多级省市区联动插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-11-25 05:10浏览(1760)

本文演示了cxSelect三种演示效果,分别是国内省市区三级联动http://www.erdangjiade.com/jquery/5/574/demo/demo_global.html,全球主要国家城市联动,和自定义数据http://www.erdangjiade.com/jquery/5/574/demo/demo_custom.html

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

cxSelect多级省市区联动插件
分类:表单代码 > 三级联动 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

首先引入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.erdangjiade.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.erdangjiade.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': '无子级'}
    ]
});
参数 描述 默认值

cxSelect参数设置

selects 下拉选框组。输入 select 的 className []
url 每个选框的内容使用各自的接口地址 null
nodata 子集无数据时 select 的状态。可设置为: null
required 是否为必选。设为 false 时,会在列表头部添加 false
firstTitle 选框第一个项目的标题(仅在 required 为 false 时有效) 请选择
firstValue 选框第一个项目的值(仅在 required 为 false 时有效) -
jsonSpace 数据命名空间 -
jsonName 数据标题字段名称(用于 option 的标题) 'n'
jsonValue 数据值字段名称(用于 option 的 value,没有值字段时使用标题作为 value) -
jsonSub 子集数据字段名称 's'

data 属性参数

在父元素上的 data- 属性

data-selects 下拉选框组。输入 select 的 className,使用英文逗号分隔的字符串 -
data-url 列表数据接口地址(此处只能设置 URL,自定义需要在参数中设置) -
data-nodata 子集无数据时 select 的状态 -
data-required 是否为必选 -
data-first-title 选框第一个项目的标题 -
data-first-value 选框第一个项目的值 -
data-json-space 数据命名空间 -
data-json-name 数据标题字段名称 -
data-json-value 数据值字段名称 -
data-json-sub 子集数据字段名称 -

在<select>元素上的 data- 属性

<select class=

data-value 默认选中值 -
data-url 列表数据接口地址 -
data-query-name 传递上一个选框值的参数名称(默认使用上一个选框的 name 属性值) -
data-first-title 选框第一个项目的标题 -
data-first-value 选框第一个项目的值 -
data-json-space 数据命名空间 -
data-json-name 数据标题字段名称 -
data-json-value 数据值字段名称 -
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/574.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    07-13 18:09
    1773384979@qq.com
    ncie很好,满足要求
  • 头像 沙发
    11-15 09:11
    qq562140910
    不错,,实用1
1 2