用select2实现可搜索的下拉框
在我们的开发过程中通常会碰到很长的下拉选择框，这时候我们选择的时候便会十分的困难，今天也是在开发中遇到了这种问题，在网上找了很多的资料和插件，最终发现一款简单使用的输入下拉框插件，这边是本文中要说的select2
话不多说直接上代码
引入相关css和js
<!-- 加载 样式 --><link href="/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" /><!-- 加载 Jquery --><script src="/jquery/2.0.0/jquery.min.js"></script><!-- 加载 Select2 --><script src="/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
上述代码便是关键之处，当我们引入了css、js后，我们便可以方便的使用本插件了，此处需要注意的是在我们引入js的时候，我们需要先引入jquery后再进行引入select2.min.js,否则会报错。因为select2是基于jquery而进行封装的插件。
在页面中使用
<script>$(function (){$("#my-select").select2();})</script>
在页面中使用时，只需要在所需要加搜素下拉框的select标签上写上id属性，然后js中将其初始化便可。
如下是完整代码
<html><head><title>select2</title><link href="/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><!-- 加载 Jquery --><script src="/jquery/2.0.0/jquery.min.js"></script><!-- 加载 Select2 --><script src="/ajax/libs/select2/4.0.8/js/select2.min.js"></script><script>$(function (){$("#my-select").select2();})</script></body></html>
如有什么错误之处，请各位看官多多指出，共同进步！
