【Select2】带搜索框的下拉框美化插件

最新推荐文章于 2024-01-25 00:44:52 发布

dianqiangjin0204

最新推荐文章于 2024-01-25 00:44:52 发布

阅读量249

点赞数

文章标签： git

原文链接：http://www.cnblogs.com/richerdyoung/p/7239270.html

版权

1 引入js css 文件

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/select2.full.js"></script>
<link href="css/select2.css" rel="stylesheet" type="text/css">

2 html 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>演示</title>
    <script src="js/jquery-1.11.1.min.js"></script>
     <script src="js/select2.full.js"></script>
     <link href="css/select2.css" rel="stylesheet" type="text/css">
  </head>
  <body>

  <div style="text-align:center;">
  <h2>select2 - 带搜索的下拉框演示</h2>
  <br/>
    <select id='ss'>
      <option value="richerdyoung">richerdyoung</option>
    </select>
   </div>
    <script>
      //本地数据获取    
      var data = [{ id: 'php', text: 'php' }, { id: 'python', text: 'python' }, { id: 'go', text: 'go' }];
      $("#ss").select2({
       data: data,
       placeholder:'请选择',
       allowClear:true
      })
    </script>
  </body>
</html>

效果如下：

演示地址： https://www.richerdyoung.cn/select2/

git 地址： https://github.com/select2/select2/releases

转载于:https://www.cnblogs.com/richerdyoung/p/7239270.html

dianqiangjin0204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Select2】带搜索框的下拉框美化插件

1 引入js css 文件<script src="js/jquery-1.11.1.min.js"></script><script src="js/select2.full.js"></script><link href="css/select2.css" rel="stylesheet" type="text/...
复制链接

扫一扫