select2插件 demo

引插件

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

html

<select name="" id="select1" class="col-sm-7">
	<option value="">誓不复婚：前妻不回头</option>
	<option value="">11111</option>
	<option value="">121212</option>
	<option value="">2222222</option>
	<option value="">誓不复婚：前妻不回头</option>
</select>

JS

$('#select1').select2();

 

动态的情况

var pageIndex = 1;
var pageIndex = 5;
$('#m_modal_2').on('shown.bs.modal', function (e) {
    console.log('show m_modal_2',e);
    $('#linkAddress').select2({
        placeholder:"请选择链接地址",
        ajax: {
            url: siteconfig.api.api_host + '/api/promot/url/list',
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem("token")
            },
            data: function (params) {
                var query = {
                    pageIndex: pageIndex,       //第几页
                    pageSize: pageSize          //多少条
                }
    
                // Query parameters will be ?search=[term]&page=[page]
                return query;
            },
            processResults: function (data, params) {
                // params.page = params.page || 1;
                pageIndex++;
                var data = JSON.parse(data);
                var result = data.data.results;
                var pageTotal = data.data.total;    //总条数
                console.log(result);
                var arr1 = [];
                $.each(result, function (index, value) {    //index:返回数据的角标    value:当条数据
                    arr1.push({
                        id: value.bookId,
                        text: value.planUrl        //要显示的option
                    });
                });
    
                return {
                    results: arr1,
                    pagination: {
                        // more: true
                        more: (pageIndex * pageSize) < pageTotal    
                    }
                };
            },
    
        }
    });
})