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 提供一个'x' 图标跨界清除的选中的选项
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>