jquery下拉插件select2教程

select2解决了html原生下拉选择控件不美观、功能弱的缺点，select2提供了漂亮的外观、多选、刷选功能。

依赖环境

1，支持Chrome 、Firefox、Edge、及IE8及以上浏览器
2，jQuery

网页引用文件

<script src="https://www.itxst.com/js/jquery.js"></script>
<script src="https://www.itxst.com/package/select2/js/select2.full.min.js"></script>
<link href="https://www.itxst.com/package/select2/css/select2.css" rel="stylesheet" />

select2.js资源下载

点击下载select2

快速开始

html代码可以和你使用原生html控件一样，无需做任何修改。

 <select id="status" style="width:120px;">
     <option>上架</option>
     <option>下架</option>
</select>

JS代码

$(document).ready(function () {
      $('#status').select2({});  //id为status的控件就被美化了
 });

在线试一试

一些基础操作

//id为status的控件转换成select2
$('#status').select2();  
//禁用id为status的select控件
$('#status').prop("disabled", true);
//启用id为status的select控件
$('#status').prop("disabled", false);
//获取ID为status的select值
$('#status').val();
//设置默认值或者指定的值,把下架设置为选中值
$('#status').val("下架").select2();