文章目錄

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');

文章目錄