select2使用积累，好找的就不写了，经常更新

最新推荐文章于 2024-04-30 19:47:54 发布

Orlando321

最新推荐文章于 2024-04-30 19:47:54 发布

阅读量448

点赞数

分类专栏： WEB 文章标签： html

本文链接：https://blog.csdn.net/orlando321/article/details/105580109

版权

WEB 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、select2多选初始化demo

<!DOCTYPE html>
<html>
    <head>
        <title>表格数据源</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 引入 Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
        <!-- 加载 Jquery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <!-- 包括所有已编译的插件 -->
        <script src="js/bootstrap.min.js"></script>
        <!-- 加载 Select2 -->
        <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    </head>
    <body>
        <h4>原始数据集</h4>
        <p id="sourceData"></p>
        <h4>数据源</h4>
        <table id="theTable" style="border: 1px solid black">
            <thead>
                <td>序号</td>
                <td>设备型号</td>
                <td>采集数据</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>华为M20，华为M30</td>
                    <td><button onclick="OnClickBtn(this)">显示到select2</button></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>华为P30，华为P40</td>
                    <td><button onclick="OnClickBtn(this)">显示到select2</button></td>
                </tr>
            </tbody>
        </table>
        
        <h4>多选select2——默认选中多个</h4>
        <select id="mobileModel" class="form-control js-example-basic-multiple" style="width: 200px">
        </select>
        <script>
            var sourceData = [
            {
                id:0,
                text:"华为M20",
            },{
                id:1,
                text:"华为M30",
            },{
                id:2,
                text:"华为P30",
            },{
                id:3,
                text:"华为P40",
            },{
                id:4,
                text:"华为P50",
            },{
                id:5,
                text:"华为P60",
            }
            ]
            
            $(document).ready(function(){
                document.getElementById("sourceData").innerHTML = JSON.stringify(sourceData);
                InitSelect2();
            })

            //初始化select2
            function InitSelect2(){
                $("#mobileModel").select2({
                    data:sourceData,
                    placeholder: "请选择",
                    allowClear: true,
                    multiple: true,
                    closeOnSelect: false,
                    escapeMarkuo: function(markup){
                        return markup;
                    },
                    minimumInputLength: 0,
                    templateResult: function formatRepo(repo){
                        var state = $('<span>' + repo.text + '</span>')
                        return state;
                    },
                    templateSelection: function formatRepoSelection(repo){
                        var state = $('<span style="background-color:lightskyblue">' + repo.text + '</span>')
                        return state;
                    },
                })
            }
            
            function OnClickBtn(obj){
                var rowindex = $(obj).parent().parent().index(); //行号
                var oTable = document.getElementById("theTable");
                var tDataStr = oTable.rows[rowindex + 1].cells[1].innerHTML;//取到表格中的数据
                var tDataArr = tDataStr.split("，");
                var arr = [];
                for(const sourText in sourceData){
                    for(const tData in tDataArr){
                        //假定当前只有表格中的字符串可用，与数据源比对，相同则取出id保存
                        if(tDataArr[tData] === sourceData[sourText].text){
                            arr.push(sourceData[sourText].id);
                        }
                    }
                }
                //循环结束，得到对应的id数组
                $("#mobileModel").val(arr).trigger('change');
            }
        </script>
    </body>
</html>

2、change事件

select2添加“onchange”事件几种办法：

A：最常见的

//直接定义
<select id="selectId" onchange="OnChangeSelect2()"></select>
//html
oParent.innerHTML = '<select id="selectID" onchange="OnChangeSelect2()"></select>'

//都没问题

B：绑定事件

错误的写法

var oSelect = document.createElement('select');
oSelect.addEventListener('change',OnChangeSelect2);
//或使用匿名函数
oSelect.addEventListener('change',function(){...});

//这都是行不通的。。。

正解（见官网https://select2.org/programmatic-control/events）

var oSelect = document.createElement('select');
//oSelect.on('select2:select',.....//错误,可以用 $("#ID") 或 $(对象object) 如下
$(oSelect).on('select2:select',function(e){//'select2:select' 有可能因版本不同，会变化
    OnChangeSelect2();
})

function OnChangeSelect2(){
    //响应事件
}

//万金油写法，不论是动态创建还是直接代码创建，都能实现响应

3、取值

A：普通select取值

//写法可能不止一种
var text = $("selectID").find("option:selected").text();//取text
var value = $("selectID").find("option:selected").val();//取value
$("#selectID option[value='" + value + "']").attr("disabled",true);//点击后禁用

B：select2取值

var value = $("#selectID").select2("data")[0].text;

//有可能没选，这个时候取值会报错，所以
var len =  $("#selectID").select2("data").length;
var value = "";
if(0 !== len){
    value = $("#selectID").select2("data")[0].text;
    value = $("#selectID").select2("data")[0].value;//或者取value
    value = $("#selectID").select2("data")[0].id;//取什么都可以，前提是已经写入的
}

4、动态改变select2宽度

情况是这样的：select2 + input组成控件组，后面有"-"号，点击删除当前行控件组（第一行不可删除），外部有“+”号，点击添加一行同样的控件组。

根据select2选定值，动态确定input是否需要显示，不显示时select2宽度300px；显示input时，select2宽度200px，input宽度100px；后面“-”号方可纵向对齐。所以select2选定后需要动态改变其宽度，太难了！

感谢这位作者的启发：https://www.cnblogs.com/bibi-feiniaoyuan/p/9377976.html

$("#select2ID").next().css({"width":"300px"});//烧脑两个小时的一行代码

Orlando321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select2使用积累，好找的就不写了，经常更新

不废话，上图！上代码！<!DOCTYPE html><html> <head> <title>表格数据源</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫