Select2:基于 jQuery 的选择框替代品 {callout color="#e6ddd1"}Select2 是一个基于 jQuery 的选择框替代品。它支持搜索、远程​​数据集和结果分页。{/callout}文档导航：Select2-官方网Select2-中文网Select2-GitHubJSONPlaceholder测试案例： <script> $(function () { $('select').select2({ theme: 'classic', // 占位符 placeholder: '这是我的占位符', // 显示清除选择 allowClear: true, // 开启多选 multiple: false, // 动态创建选项 tags: false, // 远程数据源 ajax: { url: 'http://jsonplaceholder.typicode.com/posts', dataType: 'json', // 搜索参数 data: function (params) { var query = { search: params.term, type: 'public', }; // 查询参数将是 ?search=[term]&type=public return query; }, cache: true, processResults: function (data) { // results结果对象数组中必须含有id和text属性 let datas = $.map(data, function (value) { value.text = value.title; return value; }); return { results: datas, }; }, }, // 自定义下拉结果呈现方式-可为html或者JQ templateResult: templateResult, //自定义选择项在输入框中的呈现方式-可为html或者JQ templateSelection: templateSelection, }); }); function templateSelection(state) { console.log(state); return state.text; } function templateResult(state) { return state.text; } </script>注意事项：为select赋值操作时,需在界面渲染完成相关元素被绑定之后操作。普通select赋值不生效，可链式触发change事件赋值。select.js引入需要在JQ引入之后，当发现错误时可尝试切换JQ版本。若是需要对已经绑定过的同一个select控件切换数据源,可以在再次重新绑定源之前先remove掉上一次绑定的option.