一,简介
官网 https://github.com/select2/select2
二,最简单使用方法
-
引入select2 js和css
项目中最好下载下来使用
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
-
html
<div class="row"> <span style="margin-left: 20px;">区域:</span> <select id="area" class="select2" style="width: 250px;"> <option value="" selected="selected">请选择区域</option> <option value="1">珠海</option> <option value="2">深圳</option> <option value="3">澳门</option> <option value="4">香港</option> </select> </div> <link rel="stylesheet" href="css/select2.css"/> <script src="js/select2.js"></script>
-
js
$(function () { $("#area").select2(); });
-
css
body{ margin: auto; padding: auto; background-color: aquamarine; } .row{ width: 100%; height: auto; }
效果图