制作有搜尋功能的下拉框select2

有時候表單的下拉框資料非常多，如果有個搜尋的功能，就非常友善了。這了我們用select2插件來實作。

1.引入插件

<script language="javascript" type="text/javascript" src="__PUBLIC__/zhuanti/js/jquery-1.9.1.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" target="_blank" rel="external nofollow" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

2.select框，把所有選項周遊出來，給select加上id

<div class="form-group">
                <label for="sp_type" class="col-md-1 control-label">資訊來源</label>
                <div class="col-md-3">
                    <select name="sp_type" id="sp_type" class="form-control singleSelect">
                        <option value="">請選擇</option>
                       <foreach name="sp_type_list" item="vo" key="key" >
                            <option value="{$key}">{$vo}</option>
                       </foreach>
                    </select>
                </div>
            </div>
           

3.初始化select2

// 初始化select2
    $(document).ready(function() {
        $('.singleSelect').select2();
    });
           

4.送出form表單，擷取到select框選中的值

var sp_type =  $('#sp_type').select2('val');