select2问题总结
先上图
说明:select2是一款可以多选,单选,搜索选择等等插件,一起来看看如何使用,如下图
—-引入样式
—-引入脚本
—-页面调用
问题1: 做完以上工作,发现页面上并没有出来想要的效果,如下图,这是为何?
答案1: 这时候发现没有出来我们想要的效果,这是因为我们在脚本需要绑定一下select2,如下代码
function Select2() {
//工作负责人
$(".js-example-tags").select2({
placeholder: "请选择",
tags: true
//createTag: function (params) {
// // alert(params.term);
// var term = $.trim(params.term);
// if (term === '') {
// return null;
// }
// return {
// id: '0',
// text: term,
// newTag: true // add additional parameters
// }
//}
});
$("#WorkTicket_equ_kksSelect").select2({
placeholder: "请选择",
tags: true,
createTag: function (params) {
// alert(params.term);
var term = $.trim(params.term);
if (term === '') {
return null;
}
tagid++;
return {
id: tagid,
text: term,
newTag: true // add additional parameters
}
}
});
}
我们要在页面脚本初始化的时候绑定一下Select2() 方法就好了。
用脚本给select2绑定数据,如下代码:
//获取检修单位
function GetWorkTicket_repair_company()
{
var eqstatusList = "";
$.ajax({
type: "GET",//这里是http类型
url: "/WorkTicket/WorkTicket/DicInfoList",//大家都应该很清楚了
async: false,
data: { code: "turnaround_unit", temp: Math.random() },//回传一个参数
dataType: "json",//传回来的数据类型
success: function (data) {
if (data != null) {
eqstatusList += "<option value=''>请选择</option>";
$.each(data, function (i, v) {
eqstatusList += "<option value=" + v.dic_name + ">" + v.dic_name + "</option>";
});
$("#WorkTicket_repair_company").append(eqstatusList);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
_mmm.msg('加载数据失败!');
return false;
}
});
}
问题2:在点击提交按钮的时候,如果select2是必填项,如果为空的话,希望当前select2活的焦点,并且打开下拉框列表,该如何实现呢?如下图效果:
答案2:在网上搜索了好多方法都不对,如:`
// 对元素 进行事件注册
$(“#e11”)
.on(“change”, function(e) { log(“change “+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); }) // 改变事件
.on(“select2-opening”, function() { log(“opening”); }) // select2 打开中事件
.on(“select2-open”, function() { log(“open”); }) // select2 打开事件
.on(“select2-close”, function() { log(“close”); }) // select2 关闭事件
.on(“select2-highlight”, function(e) { log (“highlighted val=”+ e.val+” choice=”+ JSON.stringify(e.choice));}) // 高亮
.on(“select2-selecting”, function(e) { log (“selecting val=”+ e.val+” choice=”+ JSON.stringify(e.choice));}) // 选中事件
.on(“select2-removing”, function(e) { log (“removing val=”+ e.val+” choice=”+ JSON.stringify(e.choice));}) // 移除中事件
.on(“select2-removed”, function(e) { log (“removed val=”+ e.val+” choice=”+ JSON.stringify(e.choice));}) // 移除完毕事件
.on(“select2-loaded”, function(e) { log (“loaded (data property omitted for brevity)”);}) // 加载中事件
.on(“select2-focus”, function(e) { log (“focus”);}) // 获得焦点事件
.on(“select2-blur”, function(e) { log (“blur”);}); // 失去焦点事件
("#e11").click(function() {(“#e11”).val([“AK”,”CO”]).trigger(“change”); });
使用上面这些事件都无济于事
后来经过不断的摸索,和同事的帮助下,终于搞定此问题,上代码:
if (IsEmpty($("#WorkTicket_repair_company").val())) {
$("#WorkTicket_repair_company_span").text("检修单位不能为空");
$("#WorkTicket_repair_company").change(function ()
{
$("#WorkTicket_repair_company_span").text("");
$("#WorkTicket_repair_company").focus();
});
$("#WorkTicket_repair_company").select2("focus");
$("#WorkTicket_repair_company").select2("open");
return;
}
最后3句话解决问题
这两个问题是我遇到比较费时的,其他的还好,如果大家有问题可以共同探讨