JQuery插件带搜索框的下拉框美化插件

Posted 依然范儿特西

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery插件带搜索框的下拉框美化插件相关的知识,希望对你有一定的参考价值。

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

 

以上是关于JQuery插件带搜索框的下拉框美化插件的主要内容,如果未能解决你的问题,请参考以下文章

求jquery版的多选树形下拉框的插件(Multiple ComboTree)?

jquery multiSelect 怎么清空选择

jQuery自定义漂亮的下拉框插件8种效果

jQuery自定义漂亮的下拉框插件8种效果

jQuery 多选下拉框插件

下拉框的搜索(有图,适用下拉选择内容较多,需要搜索,自动联想)