select2位置错乱_select2使用过程中的问题总结

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 += "请选择";

$.each(data, function (i, v) {

eqstatusList += "" + v.dic_name + "";

});

$("#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句话解决问题

这两个问题是我遇到比较费时的，其他的还好，如果大家有问题可以共同探讨