By

文章目錄

select2组件用来替代select, 它的一个最常用功能是搜索功能。

编写如下简单测试代码，可以看看搜索功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>

    <select class="js-example-basic-single">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $(".js-example-basic-single").select2();
    });
    </script>
</body>

使用过程中遇到的一个问题是，当改变了select2的值时，改变后的结果没有显示在页面上。在select2 FAQ里有说到这个问题，需要触发change事件。如果只想把change事件限定在select2内，可以使用$('select').trigger('change.select2');

打赏作者

文章目錄