This commit is contained in:
2025-04-26 11:07:05 +08:00
commit abf553c41b
4942 changed files with 930993 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
{
"name": "fastadmin-cxselect",
"homepage": "https://github.com/karsonzhang/fastadmin-cxselect",
"version": "1.4.1",
"_release": "1.4.1",
"_resolution": {
"type": "version",
"tag": "1.4.1",
"commit": "ec3b35ea0611024781630661356e19c71e6e2c88"
},
"_source": "https://github.com/karsonzhang/fastadmin-cxselect.git",
"_target": "~1.4.0",
"_originalSource": "fastadmin-cxselect"
}

View File

@@ -0,0 +1,167 @@
# jQuery cxSelect
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。
列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式。
同时兼容 Zepto方便在移动端使用。
国内省市县数据来源:[basecss/cityData](https://github.com/basecss/cityData) Date: 2014.03.31
全球主要城市数据来源:整理国内常用网站和软件 Date: 2014.07.29
**版本:**
* jQuery v1.7+ | Zepto v1.0+
* jQuery cxSelect v1.4.0
文档http://code.ciaoca.com/jquery/cxselect/
示例http://code.ciaoca.com/jquery/cxselect/demo/
## 使用方法
### 载入 JavaScript 文件
```html
<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>
```
### DOM 结构
```html
<!--
select 必须放在元素 id="element_id" 的内部,不限层级
select 的 class 任意取值,也可以附加多个 class如 class="province otherclass",在调用时只需要输入其中一个即可,但是不能重复
-->
<div id="element_id">
<select class="province"></select>
<select class="city"></select>
<select class="area"></select>
</div>
```
### 设置默认值
```html
<!--
方法一:使用 option 的 value 和 selected 属性
-->
<select class="province">
<option value="浙江省" selected>浙江省</option>
</select>
<!--
方法二:使用 select 的 data-value 属性
当同时设置 option 的 value 和 select 的 data-value 时,优先使用 data-value 的值
-->
<select class="province" data-value="浙江省"></select>
```
### 调用 cxSelect
``` javascript
$('#element_id').cxSelect({
url: 'cityData.min.json' // 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件
selects: ['province', 'city', 'area'], // selects 为数组形式,请注意顺序
emptyStyle: 'none'
});
```
### 设置参数全局默认值
``` javascript
// 需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置
$.cxSelect.defaults.url = 'cityData.min.json';
$.cxSelect.defaults.emptyStyle = 'none';
```
### API 接口
``` javascript
var cxSelectApi;
// 方法一:
cxSelectApi = $.cxSelect($('#element_id'), {
selects: ['province', 'city', 'area']
});
// 方法二:
$('#element_id').cxSelect({
selects: ['province', 'city', 'area']
}, function(api) {
cxSelectApi = api;
});
cxSelectApi.attach();
cxSelectApi.detach();
cxSelectApi.clear();
cxSelectApi.setOptions();
```
## 参数说明
名称|默认值|说明
---|---|---
selects|[]|下拉选框组。<br>输入 select 的 className
url|null|整合数据接口地址URL<br>每个选框的内容使用各自的接口地址,详见 [DEMO](http://code.ciaoca.com/jquery/cxselect/demo/oneself.html)
data|null|自定义数据,类型为数组,使用 JSON 格式。[DEMO](http://code.ciaoca.com/jquery/cxselect/demo/custom.html)
emptyStyle|null|子集无数据时 select 元素的显示状态。<br>可设置为:**"none"**(display:none), **"hidden"**(visibility:hidden)
required|false|是否为必选。<br>设为 `false` 时,会在列表头部添加 `<option value="firstValue">firstTitle</option>` 选项。
firstTitle|'请选择'|选框第一个项目的标题(仅在 `required` 为 `false` 时有效)
firstValue|''|选框第一个项目的值(仅在 `required` 为 `false` 时有效)
jsonSpace|''|数据命名空间
jsonName|'n'|数据标题字段名称(用于 option 的标题)
jsonValue|''|数据值字段名称(用于 option 的 value没有值字段时使用标题作为 value
jsonSub|'s'|子集数据字段名称
## data 属性参数
### 父元素的 data- 属性
```html
<div id="element_id" data-url="cityData.min.json" data-required="true"></select>
```
名称|说明
---|---
data-selects|下拉选框组。<br>输入 select 的 className使用英文逗号分隔的字符串
data-url|列表数据接口地址
data-empty-style|子集无数据时 select 的显示状态
data-required|是否为必选
data-first-title|选框第一个项目的标题
data-first-value|选框第一个项目的值
data-json-space|数据命名空间
data-json-name|数据标题字段名称
data-json-value|数据值字段名称
data-json-sub|子集数据字段名称
### select 元素的 data- 属性
```html
<select class="province" data-value="浙江省" data-first-title="选择省"></select>
```
名称|说明
---|---
data-value|默认选中值
data-url|列表数据接口地址
data-required|是否为必选
data-query-name|传递上一个选框值的参数名称(默认使用上一个选框的 name 属性值)
data-first-title|选框第一个项目的标题
data-first-value|选框第一个项目的值
data-json-space|数据命名空间
data-json-name|数据标题字段名称
data-json-value|数据值字段名称
##API 接口
名称|说明
---|---
attach()|绑定。<br>调用时会自动进行绑定用于使用detach解除绑定后进行重新绑定。
detach()|解除绑定。<br>解除绑定后,不再具有联动效果。
clear(index)|清空选项。<br>清空第 index 个 select 自身及之后的 select 的选项。<br>`index`: select 的序号,从 0 开始
setOptions(settings)|重新设置参数。<br>`settings`: 与调用时参数一致
##自定义数据及使用纯数组数据
可以使用任何类型的数据作为值,但最终都会被转化为文本。
[自定义数据 DEMO](http://code.ciaoca.com/jquery/cxselect/demo/custom.html)
##各选项数据接口独立
可以为每个```select```设置一个接口,根据接口返回的数据结构,设置```json-space```、```json-name```、```json-value```适应 JSON 结构(包括纯数组)。
当页面加载时,第一个选框已有选项数据,可以不设置第一个选框的接口。
[独立接口 DEMO](http://code.ciaoca.com/jquery/cxselect/demo/oneself.html)

View File

@@ -0,0 +1,331 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxSelect 联动下拉菜单 &raquo; 在线演示 - 前端开发仓库</title>
<style>
body{background:#ddd;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}
h1,h2,h3{font-size:36px;line-height:1;}
h2{font-size:24px;}
h3{font-size:18px;}
fieldset{margin:2em 0;}
fieldset legend{font-weight:bold;font-size:16px;line-height:2;}
select,button{padding:0.5em;}
a{color:#06f;text-decoration:none;}
a:hover{color:#00f;}
.wrap{width:900px;margin:0 auto;padding:20px 50px;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2);}
</style>
</head>
<body>
<div class="wrap">
<h1>cxSelect 联动下拉菜单</h1>
<h2>示例</h2>
<p>如果无法通过 AJAX 获取数据,请运行在服务器环境下。</p>
<fieldset id="city_china">
<legend>默认</legend>
<p>省份:<select class="province other">
<option>请选择</option>
</select></p>
<p>城市:<select class="city">
<option>请选择</option>
</select></p>
<p>地区:<select class="area">
<option>请选择</option>
</select></p>
</fieldset>
<fieldset id="city_china_val">
<legend>设置默认值及选项标题</legend>
<p>所在地区:
<select class="province other" data-first-title="选择省">
<option value="">请选择</option>
<option value="浙江省" selected>浙江省</option>
</select>
<select class="city" data-first-title="选择市">
<option value="">请选择</option>
<option value="杭州市" selected>杭州市</option>
</select>
<select class="area" data-first-title="选择地区">
<option value="">请选择</option>
<option value="西湖区" selected>西湖区</option>
</select>
</p>
</fieldset>
<!-- <fieldset id="city_china_val">
<legend>多种设置默认值的方式</legend>
<p>方法一:使用 option 的 value 和 selected 属性</p>
<p><select class="province">
<option>浙江省</option>
</select></p>
<p>如果有多个 option ,需要使用 selected 属性指定选中项</p>
<p><select class="city">
<option>请选择</option>
<option value="杭州市" selected>杭州市</option>
</select></p>
<p>方法二:使用 select 的 data-value 属性</p>
<p><select class="area" data-value="西湖区">
<option>请选择</option>
</select></p>
</fieldset> -->
<fieldset id="global_location">
<legend>全球主要国家城市联动</legend>
<p>所在地区:
<select class="country" data-first-title="选择国家"></select>
<select class="state" data-required="true"></select>
<select class="city" data-required="true"></select>
<select class="region" data-required="true"></select>
</p>
</fieldset>
<fieldset id="custom_data">
<legend>自定义选项</legend>
<p>一:<select class="first"></select></p>
<p>二:<select class="second"></select></p>
<p>三:<select class="third"></select></p>
<p>四:<select class="fourth"></select></p>
<p>五:<select class="fifth"></select></p>
</fieldset>
<fieldset>
<legend>API 接口</legend>
<div id="api_data">
<dl>
<dt>选择器组 A</dt>
<dd>
<select class="province select"></select>
<select class="city select"></select>
<select class="area select"></select>
</dd>
</dl>
<dl>
<dt>选择器组 B</dt>
<dd>
<select class="first select"></select>
<select class="second select"></select>
<select class="third select"></select>
<select class="fourth select"></select>
<select class="fifth select"></select>
</dd>
</dl>
</div>
<p>
<button type="button" class="button green" name="attach" value="">attach</button>
<button type="button" class="button green" name="detach" value="">detach</button>
<button type="button" class="button green" name="clear" value="">clear</button>
</p>
<p>
<button type="button" class="button green" name="setSelect" value="b">更换 select 组</button>
<button type="button" class="button green" name="setData" value="china">更换数据:国内数据</button>
<button type="button" class="button green" name="setData" value="global">更换数据:全球数据</button>
<button type="button" class="button green" name="setData" value="custom">更换数据:自定义数据</button>
</p>
<p>
<button type="button" class="button green" name="required" value="0">更改 required</button>
<button type="button" class="button green" name="emptyStyle" value="">更改 emptyStyle</button>
<button type="button" class="button green" name="firstTitle" value="请选择">更改 firstTitle</button>
</p>
</fieldset>
<h2>文档</h2>
<ul>
<li><a target="_blank" href="https://github.com/ciaoca/cxSelect">Github</a></li>
<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxSelect/">中文文档</a></li>
</ul>
<h2>作者</h2>
<p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p>
<p>Released under the MIT license</p>
</div>
<script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
<!-- <script src="http://cdn.staticfile.org/zepto/1.0/zepto.min.js"></script> -->
<script src="js/jquery.cxselect.js"></script>
<script>
(function() {
var urlChina = 'js/cityData.min.json';
var urlGlobal = 'js/globalData.min.json';
var dataCustom = [
{'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.defaults.url = urlChina;
// 默认
$('#city_china').cxSelect({
selects: ['province', 'city', 'area']
});
// 设置默认值及选项标题
$('#city_china_val').cxSelect({
selects: ['province', 'city', 'area'],
emptyStyle: 'none'
});
// 全球主要国家城市联动
$('#global_location').cxSelect({
url: urlGlobal,
selects: ['country', 'state', 'city', 'region'],
emptyStyle: 'none'
});
// 自定义选项
$('#custom_data').cxSelect({
selects: ['first', 'second', 'third', 'fourth', 'fifth'],
// required: true,
jsonValue: 'v',
data: dataCustom
});
// API 接口
var apiBox = $('#api_data');
var cxSelectApi;
apiBox.cxSelect({
selects: ['province', 'city', 'area']
}, function(api) {
cxSelectApi = api;
});
// cxSelectApi = $.cxSelect(apiBox, {
// selects: ['province', 'city', 'area']
// });
$('body').on('click', 'button', function() {
var _name = this.name;
var _value = this.value;
switch (_name) {
case 'attach':
cxSelectApi.attach();
break;
case 'detach':
cxSelectApi.detach();
break;
case 'clear':
cxSelectApi.clear();
break;
case 'required':
cxSelectApi.setOptions({
required: _value == 1 ? false : true
});
this.value = _value == 1 ? 0 : 1;
break;
case 'emptyStyle':
if (_value === 'none') {
_value = 'hidden';
} else if (_value === 'hidden') {
_value = '';
} else {
_value = 'none';
};
cxSelectApi.setOptions({
emptyStyle: _value
});
this.value = _value;
break;
case 'firstTitle':
_value = _value === '请选择' ? '选择吧' : '请选择';
cxSelectApi.setOptions({
firstTitle: _value
});
this.value = _value;
break;
case 'setSelect':
cxSelectApi.setOptions({
selects: _value === 'a' ? ['province', 'city', 'area'] : ['first', 'second', 'third', 'fourth', 'fifth']
});
this.value = _value === 'a' ? 'b' : 'a';
break;
case 'setData':
if (_value === 'china' || _value === 'global') {
// $.ajax({
// url: this.value === 'china' ? urlChina : urlGlobal,
// type: 'GET',
// dataType: 'json'
// }).done(function(data, textStatus, jqXHR) {
cxSelectApi.setOptions({
url: this.value === 'china' ? urlChina : urlGlobal,
// data: data
});
// }).fail(function(jqXHR, textStatus, errorThrown) {
// });
} else if (this.value === 'custom') {
cxSelectApi.setOptions({
data: dataCustom
});
};
break;
// not default
};
});
})();
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,403 @@
/*!
* jQuery cxSelect
* @name jquery.cxselect.js
* @version 1.4.1
* @date 2016-11-02
* @author ciaoca
* @email ciaoca@gmail.com
* @site https://github.com/ciaoca/cxSelect
* @license Released under the MIT license
*/
(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(window.jQuery || window.Zepto || window.$);
};
}(function($) {
var cxSelect = function() {
var self = this;
var dom, settings, callback;
// 分配参数
for (var i = 0, l = arguments.length; i < l; i++) {
if (cxSelect.isJquery(arguments[i]) || cxSelect.isZepto(arguments[i])) {
dom = arguments[i];
} else if (cxSelect.isElement(arguments[i])) {
dom = $(arguments[i]);
} else if (typeof arguments[i] === 'function') {
callback = arguments[i];
} else if (typeof arguments[i] === 'object') {
settings = arguments[i];
};
};
var api = new cxSelect.init(dom, settings);
if (typeof callback === 'function') {
callback(api);
};
return api;
};
cxSelect.isElement = function(o){
if (o && (typeof HTMLElement === 'function' || typeof HTMLElement === 'object') && o instanceof HTMLElement) {
return true;
} else {
return (o && o.nodeType && o.nodeType === 1) ? true : false;
};
};
cxSelect.isJquery = function(o){
return (o && o.length && (typeof jQuery === 'function' || typeof jQuery === 'object') && o instanceof jQuery) ? true : false;
};
cxSelect.isZepto = function(o){
return (o && o.length && (typeof Zepto === 'function' || typeof Zepto === 'object') && Zepto.zepto.isZ(o)) ? true : false;
};
cxSelect.getIndex = function(n, required) {
return required ? n : n - 1;
};
cxSelect.getData = function(data, space) {
if (typeof space === 'string' && space.length) {
space = space.split('.');
for (var i = 0, l = space.length; i < l; i++) {
data = data[space[i]];
};
};
return data;
};
cxSelect.init = function(dom, settings) {
var self = this;
if (!cxSelect.isJquery(dom) && !cxSelect.isZepto(dom)) {return};
var theSelect = {
dom: {
box: dom
}
};
self.attach = cxSelect.attach.bind(theSelect);
self.detach = cxSelect.detach.bind(theSelect);
self.setOptions = cxSelect.setOptions.bind(theSelect);
self.clear = cxSelect.clear.bind(theSelect);
theSelect.changeEvent = function() {
cxSelect.selectChange.call(theSelect, this.className);
};
theSelect.settings = $.extend({}, $.cxSelect.defaults, settings, {
url: theSelect.dom.box.data('url'),
emptyStyle: theSelect.dom.box.data('emptyStyle'),
required: theSelect.dom.box.data('required'),
firstTitle: theSelect.dom.box.data('firstTitle'),
firstValue: theSelect.dom.box.data('firstValue'),
jsonSpace: theSelect.dom.box.data('jsonSpace'),
jsonName: theSelect.dom.box.data('jsonName'),
jsonValue: theSelect.dom.box.data('jsonValue'),
jsonSub: theSelect.dom.box.data('jsonSub')
});
var _dataSelects = theSelect.dom.box.data('selects');
if (typeof _dataSelects === 'string' && _dataSelects.length) {
theSelect.settings.selects = _dataSelects.split(',');
};
self.setOptions();
self.attach();
// 使用独立接口获取数据
if (!theSelect.settings.url && !theSelect.settings.data) {
cxSelect.start.apply(theSelect);
// 设置自定义数据
} else if ($.isArray(theSelect.settings.data)) {
cxSelect.start.call(theSelect, theSelect.settings.data);
// 设置 URL通过 Ajax 获取数据
} else if (typeof theSelect.settings.url === 'string' && theSelect.settings.url.length) {
$.getJSON(theSelect.settings.url, function(json) {
cxSelect.start.call(theSelect, json);
});
};
};
// 设置参数
cxSelect.setOptions = function(opts) {
var self = this;
if (opts) {
$.extend(self.settings, opts);
};
// 初次或重设选择器组
if (!$.isArray(self.selectArray) || !self.selectArray.length || (opts && opts.selects)) {
self.selectArray = [];
if ($.isArray(self.settings.selects) && self.settings.selects.length) {
var _tempSelect;
for (var i = 0, l = self.settings.selects.length; i < l; i++) {
_tempSelect = self.dom.box.find('select.' + self.settings.selects[i]);
if (!_tempSelect || !_tempSelect.length) {break};
self.selectArray.push(_tempSelect);
};
};
};
if (opts) {
if (!$.isArray(opts.data) && typeof opts.url === 'string' && opts.url.length) {
$.getJSON(self.settings.url, function(json) {
cxSelect.start.call(self, json);
});
} else {
cxSelect.start.call(self, opts.data);
};
};
};
// 绑定
cxSelect.attach = function() {
var self = this;
if (!self.attachStatus) {
self.dom.box.on('change', 'select', self.changeEvent);
};
if (typeof self.attachStatus === 'boolean') {
cxSelect.start.call(self);
};
self.attachStatus = true;
};
// 移除绑定
cxSelect.detach = function() {
var self = this;
self.dom.box.off('change', 'select', self.changeEvent);
self.attachStatus = false;
};
// 清空选项
cxSelect.clear = function(index) {
var self = this;
var _style = {
display: '',
visibility: ''
};
index = isNaN(index) ? 0 : index;
// 清空后面的 select
for (var i = index, l = self.selectArray.length; i < l; i++) {
self.selectArray[i].empty().prop('disabled', true);
if (self.settings.emptyStyle === 'none') {
_style.display = 'none';
} else if (self.settings.emptyStyle === 'hidden') {
_style.visibility = 'hidden';
};
self.selectArray[i].css(_style);
};
};
cxSelect.start = function(data) {
var self = this;
if ($.isArray(data)) {
self.settings.data = cxSelect.getData(data, self.settings.jsonSpace);
};
if (!self.selectArray.length) {return};
// 保存默认值
for (var i = 0, l = self.selectArray.length; i < l; i++) {
if (typeof self.selectArray[i].attr('data-value') !== 'string' && self.selectArray[i][0].options.length) {
self.selectArray[i].attr('data-value', self.selectArray[i].val());
};
};
if (self.settings.data || (typeof self.selectArray[0].data('url') === 'string' && self.selectArray[0].data('url').length)) {
cxSelect.getOptionData.call(self, 0);
} else {
self.selectArray[0].prop('disabled', false).css({
'display': '',
'visibility': ''
});
};
};
// 获取选项数据
cxSelect.getOptionData = function(index) {
var self = this;
if (typeof index !== 'number' || isNaN(index) || index < 0 || index >= self.selectArray.length) {return};
var _indexPrev = index - 1;
var _select = self.selectArray[index];
var _selectData;
var _valueIndex;
var _dataUrl = _select.data('url');
var _jsonSpace = typeof _select.data('jsonSpace') === 'undefined' ? self.settings.jsonSpace : _select.data('jsonSpace');
var _query = {};
var _queryName;
var _selectName;
var _selectValue;
cxSelect.clear.call(self, index);
// 使用独立接口
if (typeof _dataUrl === 'string' && _dataUrl.length) {
if (index > 0) {
for (var i = 0, j = 1; i < index; i++, j++) {
_queryName = self.selectArray[j].data('queryName');
_selectName = self.selectArray[i].attr('name');
_selectValue = self.selectArray[i].val();
if (typeof _queryName === 'string' && _queryName.length) {
_query[_queryName] = _selectValue;
} else if (typeof _selectName === 'string' && _selectName.length) {
_query[_selectName] = _selectValue;
};
};
};
$.getJSON(_dataUrl, _query, function(json) {
_selectData = cxSelect.getData(json, _jsonSpace);
cxSelect.buildOption.call(self, index, _selectData);
});
// 使用整合数据
} else if (self.settings.data && typeof self.settings.data === 'object') {
_selectData = self.settings.data;
for (var i = 0; i < index; i++) {
_valueIndex = cxSelect.getIndex(self.selectArray[i][0].selectedIndex, typeof self.selectArray[i].data('required') === 'boolean' ? self.selectArray[i].data('required') : self.settings.required);
if (typeof _selectData[_valueIndex] === 'object' && $.isArray(_selectData[_valueIndex][self.settings.jsonSub]) && _selectData[_valueIndex][self.settings.jsonSub].length) {
_selectData = _selectData[_valueIndex][self.settings.jsonSub];
} else {
_selectData = null;
break;
};
};
cxSelect.buildOption.call(self, index, _selectData);
};
};
// 构建选项列表
cxSelect.buildOption = function(index, data) {
var self = this;
var _select = self.selectArray[index];
var _required = typeof _select.data('required') === 'boolean' ? _select.data('required') : self.settings.required;
var _firstTitle = typeof _select.data('firstTitle') === 'undefined' ? self.settings.firstTitle : _select.data('firstTitle');
var _firstValue = typeof _select.data('firstValue') === 'undefined' ? self.settings.firstValue : _select.data('firstValue');
var _jsonName = typeof _select.data('jsonName') === 'undefined' ? self.settings.jsonName : _select.data('jsonName');
var _jsonValue = typeof _select.data('jsonValue') === 'undefined' ? self.settings.jsonValue : _select.data('jsonValue');
if (!$.isArray(data)) {return};
var _html = !_required ? '<option value="' + String(_firstValue) + '">' + String(_firstTitle) + '</option>' : '';
// 区分标题、值的数据
if (typeof _jsonName === 'string' && _jsonName.length) {
// 无值字段时使用标题作为值
if (typeof _jsonValue !== 'string' || !_jsonValue.length) {
_jsonValue = _jsonName;
};
for (var i = 0, l = data.length; i < l; i++) {
_html += '<option value="' + String(data[i][_jsonValue]) + '">' + String(data[i][_jsonName]) + '</option>';
};
// 数组即为值的数据
} else {
for (var i = 0, l = data.length; i < l; i++) {
_html += '<option value="' + String(data[i]) + '">' + String(data[i]) + '</option>';
};
};
_select.html(_html).prop('disabled', false).css({
'display': '',
'visibility': ''
});
// 初次加载设置默认值
if (typeof _select.attr('data-value') === 'string') {
_select.val(String(_select.attr('data-value'))).removeAttr('data-value');
if (_select[0].selectedIndex < 0) {
_select[0].options[0].selected = true;
};
};
if (_required || _select[0].selectedIndex > 0) {
_select.trigger('change');
};
};
// 改变选择时的处理
cxSelect.selectChange = function(name) {
var self = this;
if (typeof name !== 'string' || !name.length) {return};
var index;
name = name.replace(/\s+/g, ',');
name = ',' + name + ',';
// 获取当前 select 位置
for (var i = 0, l = self.selectArray.length; i < l; i++) {
if (name.indexOf(',' + self.settings.selects[i] + ',') > -1) {
index = i;
break;
};
};
if (typeof index === 'number' && index > -1) {
index += 1;
cxSelect.getOptionData.call(self, index);
};
};
$.cxSelect = function() {
return cxSelect.apply(this, arguments);
};
// 默认值
$.cxSelect.defaults = {
selects: [], // 下拉选框组
url: null, // 列表数据文件路径URL或数组数据
data: null, // 自定义数据
emptyStyle: null, // 无数据状态显示方式
required: false, // 是否为必选
firstTitle: '请选择', // 第一个选项的标题
firstValue: '', // 第一个选项的值
jsonSpace: '', // 数据命名空间
jsonName: 'n', // 数据标题字段名称
jsonValue: '', // 数据值字段名称
jsonSub: 's' // 子集数据字段名称
};
$.fn.cxSelect = function(settings, callback) {
this.each(function(i) {
$.cxSelect(this, settings, callback);
});
return this;
};
}));

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,23 @@
{
"name": "cxselect",
"version": "1.4.0",
"description": "cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。",
"keywords": ["jquery plugin","select"],
"main": "./js/jquery.cxselect.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"jquery": ">=1.7"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ciaoca/cxSelect.git"
},
"author": "Ciaoca <ciaoca@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/ciaoca/cxSelect/issues"
},
"homepage": "http://code.ciaoca.com/jquery/cxSelect/"
}