用select2简单实现下拉框带搜索框

首先导入文件,我们需要jquery和select2

<script type="text/javascript" src="/js/plugins/jquery/jquery-2.1.3.min.js"></script>

<link rel="stylesheet" href="/js/select2/select2.min.css" type="text/css" />

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

具体代码如下:

风格设置:

$('#strategyId').select2();
$('#strategyId').select2({
    //当没有选择数据时,显示内容
    placeholder: '请选择所属攻略',
    //当存在数据时,显示清楚按钮
    allowClear: true
});

页面设置:

<div class="form-group select2">
    <select class="form-control form-control-chosen fa fa-search" id="strategyId" name="strategyId">
        <#list strategys as s>
            <option value="${s.id}">${s.title}</option>
        </#list>
    </select>
    <script>
        $("#strategyId").val(${qo.strategyId});
    </script>
</div>

js代码:

$('#strategyId').select2();
$('#strategyId').select2({
    //当没有选择数据时,显示内容
    placeholder: '请选择所属攻略',
    //当存在数据时,显示清楚按钮
    allowClear: true
});

效果图:

 

具体效果可以去查看SELECT2官网