制作有搜索功能的下拉框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" 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');