用select2实现可搜索下拉框：开发难题与解决之道

hwyzw · 发表于 4 小时前

<p[]用实现可搜索的下拉框
开发时经常遇到选择项极多的下拉列表，挑选时相当不便，今日也碰上类似状况，遍寻网络资料与插件，最终找到一款操作简便的输入式下拉组件，这就是本文要介绍的对象

话不多说直接上代码

 <pre><code class="prism language-html">
<link href="这个网址指向一个资源文件，包含了名为select2的库的样式表，版本是4.0.8，这个资源文件是一个CSS文件，用于定制下拉选择框的外观和功能，可以通过网络链接获取并使用" rel="stylesheet" />

<script src="这个网址指向百度提供的jQuery库文件，版本是2.0.0，文件类型为压缩后的JavaScript代码，文件名包含了版本号后缀min，表明它是一个精简压缩版的库文件。"></script>

<script src="这个网址指向一个资源文件，它包含了select2的版本4.0.8的JavaScript代码，用户可以通过这个链接获取并使用该库。"></script>
</code></pre>
这段代码是核心所在，当我们加载了css和js之后，就能轻松地运用这个插件了，这里要特别留意的是，在加载js文件时，必须先加载普通版本，再加载带.min后缀的版本，否则会出现错误提示，这是由于该插件是依托某个框架进行封装的。

 <pre><code class="prism language-javascript"><script>
$(function (){
$("#my-select").select2();
})
</script>
</code></pre>
在页面部署时，仅需给目标搜索下拉框的标签元素赋予一个id标识，随后在脚本代码里完成该元素的初始化配置即可。

如下是完整代码

 <pre><code class="prism language-html"><html>
<head>
<title>select2</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<style>
body {

display: flex;
align-items: center;
justify-content: center;
}
#my-select {
width:190px;
}
</style>
</head>
<body>
请选择省份：
<select id="my-select">
<option>请选择</option>
<option>陕西省</option>
<option>云南省</option>
<option>甘肃省</option>
<option>浙江省</option>
</select>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
$(function (){
$("#my-select").select2();
})
</script>
</body>
</html>
</code></pre>
如有什么错误之处，请各位看官多多指出，共同进步！

用select2实现可搜索下拉框：开发难题与解决之道

更多帖子推荐