先上图
说明：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句话解决问题
这两个问题是我遇到比较费时的，其他的还好，如果大家有问题可以共同探讨
