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" onclick="return checkItag()">      <span class="glyphicon glyphicon-search"><span style="margin-left:10px; font-size:16px;">查询</span></span>   </button></span>               </div>           </div>