用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" target="_blank" rel="external nofollow"  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官網