select2的使用

1、引入select2的js文件,引入的文件需要在jquery文件后

<script type="text/javascript" src="__PUBLIC__/admin/js/select2.full.min.js"></script>

2、引入select2的css文件,引入的文件最好在自己的样式文件之前(便于对select2的样式进行自定义修改)

<link rel="stylesheet" href="__PUBLIC__/admin/css/select2.min.css">

3、使用时对直接选中select标签使用即可

例:

HTML

<select name="belong" id="belong">

  <option value="index">首页</option>

  <option value="flash">视频</option>

</select>

js

$("#belong").select2();

$("#belong").val(["flash"]).trigger("change");  //选中默认值(数组形式可用于多选的情况)

4、自定义select2的样式

css

.select2-selection{

  width: 498px !important;  //长度的设置

}

.select2-container--default .select2-selection--single{

  border: 1px solid #cccccc;  //边框颜色设置

  outline:none;  //外边框选中的样式

}

.dropdown-wrapper{

  display: none;  //隐藏可能产生的点击无效区域

}

猜你喜欢

转载自blog.csdn.net/Lisunlight/article/details/82942224