jQuery.Slwy.Selector plugin
绑定元素为select
//html
<select name="select" class="demo-select">
<option value="CA" data-right="CA" disabled>中国国际航空</option>
<option value="MU" data-right="MU">东方航空</option>
<option value="CZ">南方航空</option>
<option value="FM" disabled>上海航空</option>
</select>
//JS
$('select.demo-select').SlwySelector({
showRight: true,//是否显示右侧字段
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/
----传入自定义数据
若同时存在<option></option>与自定义data，优先使用data
//html
<select name="select" class="demo-select-optgroup-data">
</select>
//自定义data
[
{
"KeyID": 0,
"CarrierCode": "HU",
"CarrierShortName": "海南航空",
"CarrierName": "海南航空",
"SettleCode": "0",
"CountryType": 0,
"CountryTypeName": "国内",
"IsDelete": 0,
"AddTime": "0001-01-01T00:00:00",
"AddUser": "",
"ModifyUser": ""
},
...
]
//JS
$('select.demo-select-data').SlwySelector({
data: data,//自定义数据
showField: 'CarrierName',//需要展示的自定义数据字段名
showRight: true,//是否显示右侧字段
showRightFiled: 'CarrierCode',//需要展示的右侧自定义数据字段名
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/
绑定有optgroup的select
//html
<select name="select" class="demo-select-optgroup">
<optgroup label="国内航空公司">
<option value="CA" data-right="CA" disabled>中国国际航空</option>
<option value="MU" data-right="MU">东方航空</option>
<option value="CZ">南方航空</option>
<option value="FM" disabled>上海航空</option>
</optgroup>
<optgroup label="国外航空公司">
<option value="IR" data-right="IR">伊朗航空公司</option>
<option value="IT" data-right="IT">法国国内航空公司</option>
<option value="J2" data-right="J2">阿塞拜疆航空公司</option>
</optgroup>
</select>
//JS
$('select.demo-select-optgroup').SlwySelector({
showRight: true,//是否显示右侧字段
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/
----传入自定义数据
若同时存在<option></option>与自定义data，优先使用data
//html
<select name="select" class="demo-select-optgroup-data">
</select>
//自定义data
[
{
"label": "国内航空公司",
"optgroup": true,
"options": [
{
"KeyID": 0,
"CarrierCode": "HU",
"CarrierShortName": "海南航空",
"CarrierName": "海南航空",
"SettleCode": "0",
"CountryType": 0,
"CountryTypeName": "国内",
"IsDelete": 0,
"AddTime": "0001-01-01T00:00:00",
"AddUser": "",
"ModifyUser": ""
},
...
]
},
{
"label": "国际航空公司",
"optgroup": true,
"options": [
{
"KeyID": 0,
"CarrierCode": "AJ",
"CarrierShortName": "比利时空运公司",
"CarrierName": "比利时空运公司",
"SettleCode": "0",
"CountryType": 1,
"CountryTypeName": "国际",
"IsDelete": 0,
"AddTime": "0001-01-01T00:00:00",
"AddUser": "",
"ModifyUser": ""
},
...
]
}
]
//JS
$('select.demo-select-optgroup-data').SlwySelector({
data: data,//自定义数据
showField: 'CarrierName',//需要展示的自定义数据字段名
showRight: true,//是否显示右侧字段
showRightFiled: 'CarrierCode',//需要展示的右侧自定义数据字段名
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/
其他参数配置
----自定义宽度
//html
<select name="select" class="demo-other-width">
<option value="CA" data-right="CA" disabled>中国国际航空</option>
<option value="MU" data-right="MU">东方航空</option>
<option value="CZ">南方航空</option>
<option value="FM" disabled>上海航空</option>
</select>
//JS
$('select.demo-other-width').SlwySelector({
showRight: true,//是否显示右侧字段
width: 300,
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
----自定义每页显示数量
//html
<select name="select" class="demo-other-viewCount">
</select>
//JS
$('select.demo-other-viewCount').SlwySelector({
data: data,//自定义数据
showField: 'CarrierName',//需要展示的自定义数据字段名
showRight: true,//是否显示右侧字段
showRightFiled: 'CarrierCode',//需要展示的右侧自定义数据字段名
viewCount: 15,//每页显示数量
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
----自定义搜索字段
//html
<select name="select" class="demo-other-searchField">
</select>
//JS
$('select.other-searchField').SlwySelector({
data: data,//自定义数据
showField: 'CarrierName',//需要展示的自定义数据字段名
search: true,//是否显示搜索
searchField: ['CarrierCode'],
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})