官网 https://select2.org/

因为我想实现添加标签的功能,后面发现了Select2可以完成
(在列表里面选择,然后添加到文本框中,目前只能获取option中的文本,不能获取value)

安装

引入到html中,这样就不用再本地引入了。

<link href="https://cdnjs.cloudflare.com/...; rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/...;></script>

直接放代码(本地还需引入jquery文件)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
  <style type="text/css">

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #3c8dbc;color: rgb(255, 255, 255);
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      color: rgb(255, 255, 255);
    }
  </style>
</head>
<body>
  <br/>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 400px;">
  <option value="a1" selected="selected">aaa</option>
  <option value="b1">bbb</option>
  <option value="c1">ccc</option>
  <option value="d1">ddd</option>
  <option value="f1">Alabama</option>
  <option value="g1">Wyoming</option>
</select>


<input type="button" value="点击" id="inpbtn">
<script src="jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script>
  $(document).ready(function () {
    $('.js-example-basic-multiple').select2({
       placeholder: '请选择标签',
    });
  });

  var arrayObj = new Array()
    $('#inpbtn').click(function(){
      for(var i=0; i< $('.select2-selection__choice').length;i++){
        var optionVal = $('.select2-selection__choice')[i].getAttribute('title');
        arrayObj.push(optionVal);
      }
      console.log(arrayObj);
    })
    
</script>
</body>

</html>

需要获取文本框里面的内容

clipboard.png

发现在li标签里面,同时title里面也有这个文本
li里面的文本不知道怎么获取,所以就获取title里面的值

clipboard.png

拿到了

clipboard.png


小咸鱼
11 声望4 粉丝

一只不断学习的小咸鱼