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句话解决问题

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

select2使用过程中的问题总结

select2问题总结

猜你喜欢