【www.bbyears.com--jquery】
一直在用Chosen这个js插件,其目的就是美化下拉框。github地址:https://harvesthq.github.io/chosen/
no_results_text:"xxxxx"无搜索结果时显示的文本
allow_single_deselect:true 是否允许取消选择
disable_search: true 是否有搜索框出现
max_selected_options:当select为多选时,最多选择个数
官方说明文档地址
配置选项的官方说明文档地址
/* 功能: Chosen通用初始化
* 创建人:Brian 创建时间:2016-12-13
*/
(
word">function
($j) {
word">var
chosenTool =
function
(el, options) {
this
.opts = options;
this
.chosenInit();
this
.chose_get_init();
this
.chose_mult_set_init(
this
.opts.hidClassName);
this
.clickEvent();
return
this
;
}
chosenTool.opts = {
selectId:
''
,
//selectId
hidClassName:
''
,
//隐藏域Class
placeholdertxt:
''
,
//select中placeholder文字
noresulttxt:
''
,
//输入的名称未查到时显示的文字
dataJson:
''
//数据源
};
$j.fn.myChosenTool =
function
(opt) {
var
value,
args = Array.prototype.slice.call(arguments, 1);
var
$jthis = $j(
this
),
data = $jthis.data(
'chosenTool'
),
options = $j.extend({}, chosenTool.opts, $jthis.data(),
typeof
option ===
'object'
&& option);
if
(
typeof
option ===
'string'
) {
//判断用户调用的方法是否存在
//if ($j.inArray(option, allowedMethods) < 0) {
// throw new Error("Unknown method: " + option);
//}
if
(!data) {
return
;
}
value = data[option].apply(data, args);
if
(option ===
'destroy'
) {
$jthis.removeData(
'chosenTool'
);
}
}
/*插件外部调用插件内部的方法需要修改成下面形式*/
//if (typeof opt === 'string') {
// if (!data) {
// return;
// }
// value = data[opt].apply(data, args);
// if (opt === 'destroy') {
// $jthis.removeData('chosenTool');
// }
//}
if
(!data) {
opt[
"selectId"
] = $j(
this
).attr(
"id"
);
$jthis.data(
'chosenTool'
, (data =
new
chosenTool(
this
, opt)));
}
console.log(data);
return
typeof
value ===
'undefined'
?
this
: value;
};
chosenTool.prototype.clickEvent =
function
() {
var
_this =
this
;
$j(
"#"
+
this
.opts.selectId).on(
"change"
,
function
() {
_this.chose_get_value();
});
};
/*下拉框初始化方法*/
chosenTool.prototype.selectInfoInit =
function
() {
var
proOPts =
""
;
this
.opts.dataJson = $j.parseJSON(
this
.opts.dataJson);
$j.each(
this
.opts.dataJson,
function
(index, item) {
proOPts +=
"
+ item.TextField +
""
;
});
$j(
"#"
+
this
.opts.selectId).append(proOPts);
//初始化chosen
$j(
"#"
+
this
.opts.selectId).chosen({
allow_single_deselect:
true
,
//是否允许取消选择
placeholder_text_multiple:
this
.opts.placeholdertxt,
//多选框没有选中任何值的时候 显示的文字
no_results_text:
this
.opts.noresulttxt,
//无搜索结果时显示的文本
search_contains:
true
//是否支持模糊搜索
});
};
/*对象初始化方法*/
chosenTool.prototype.chosenInit =
function
() {
this
.selectInfoInit();
};
//私有方法,检测参数是否合法
chosenTool.prototype.isValid =
function
() {
return
!
this
.options || (
this
.options &&
typeof
this
.options ===
"object"
) ?
true
:
false
;
};
//数据同步
chosenTool.prototype.chose_get_init =
function
() {
var
selectId =
this
.opts.selectId;
$j(
"#"
+
this
.opts.selectId).chosen().change(
function
() {
$j(
"#"
+ selectId).trigger(
"liszt:updated"
);
//更新下拉框
});
};
//单选select value获取
chosenTool.prototype.chose_get_value =
function
() {
var
selectVal = $j(
"#"
+
this
.opts.selectId).val();
$j(
"."
+
this
.opts.hidClassName).val(selectVal);
};
//单选select value获取
chosenTool.prototype.chose_mult_set_init =
function
() {
var
values = $j(
"."
+
this
.opts.hidClassName).val();
if
(values && values.indexOf(
','
) > 0) {
var
arr = values.split(
','
);
var
length = arr.length;
var
value =
''
;
for
(i = 0; i < length; i++) {
value = arr[i];
$j(
"#"
+
this
.opts.selectId +
" [value='"
+ value +
"']"
).attr(
'selected'
,
'selected'
);
}
}
else
{
$j(
"#"
+
this
.opts.selectId +
" [value='"
+ values +
"']"
).attr(
'selected'
,
'selected'
);
}
$j(
"#"
+
this
.opts.selectId).trigger(
"liszt:updated"
);
};
//select text获取,多选时请注意
chosenTool.prototype.chose_get_text =
function
() {
return
$j(
"#"
+
this
.opts.selectId +
" option:selected"
).text();
};
})(jQuery);