tp 里面 select2 筛选实例

参考文档   https://kevin-brown.com/select2/examples.html

select2 选项   https://kevin-brown.com/select2/options.html

https://select2.org/configuration/options-api

下载链接   https://github.com/select2/select2

下载bootstrap-theme地址   https://github.com/select2/select2-bootstrap-theme  

tp 引入 css js 的方法 :

<link rel="stylesheet" href="__CSS__select2.min.css">

<script src="__JS__select2.full.min.js"></script>

备注；

__JS__  是 statics/js 文件夹 

CSS 部分

<link rel="stylesheet" href="__CSS__select2.min.css">
<link rel="stylesheet" href="__CSS__select2-bootstrap.min.css">

JS部分:

$(document).ready(function() {
    $("#itag_sel").select2({
        allowClear: true,
        theme: "bootstrap",
        placeholder: '请选择标签'
    });
});

allowclear  boolean 提供一个＇ｘ＇　图标跨界清除的选中的选项   

theme 不使用默认的select 样式 ,用bootstrap 替换 ,  需要引入  select2-bootstrap.min.css

placeholder  默认的提示 

常用选项:

     allowClear: true, // 提供‘x’清除选项
            theme: "bootstrap", // 使用的主题
            placeholder: '选择地区', // 提示
            width : '100px' // 避免选项溢出

multiple boolean  是否支持多选

HTML部分

           <div class="form-group">
               <label class="col-sm-2 control-label" style="font-size:16px;">选择标签</label>
               <div class="input-group col-sm-5">
                   <select id="itag_sel" class="form-control select2-allow-clear" name="itag_id">
                       <?php if (isset($input['itag'])) { ?>
                       <option value="{$input['itag_id']}" >{$input['itag']}</option>
                       <?php } ?>
                       <option value="" >请选择标签</option>
                       <foreach name="itag_list"  item="itag">
                           <option value="{$itag['id']}" >{$itag['itag']}</option>
                       </foreach>

                   </select>
                   <span class="input-group-btn">
   <button class="btn btn-primary" type="submit" data-select2-open="single-append-text" οnclick="return checkItag()">
      <span class="glyphicon glyphicon-search"><span style="margin-left:10px; font-size:16px;">查询</span></span>
   </button>
</span>
               </div>
           </div>