JS组件Bootstrap Select2使用方法解析

Bootstrap 2019-01-01

本文总结了组件Bootstrap Select2在一些实际项目中的用法，分享给大家，有需要的朋友可以借鉴一下，少走些弯路，具体内容如下

效果图：

无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及：

rush:xhtml;"> {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/select2.min.css') }} {{ stylesheet_link('css/font-awesome.min.css') }} {{ stylesheet_link('css/prettify.css') }}

{{ javascript_include('js/lib/jquery.js') }}
{{ javascript_include('js/lib/select2.full.js') }}
{{ javascript_include('js/lib/bootstrap.js') }}
<div class="container">
<section id="tags" class="row">
<div class="col-md-4">

固定方式获取：

rush:js;"> $(".js-example-tags").select2({ tags: true,//是否可以自定义tag createSearchChoice:function(term,data) { alert(1); if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term,text:term};} },multiple: true,data: [{id: 0,text: 'story'},{id: 1,text: 'bug'},{id: 2,text: 'task'}] });

ajax方式获取：

rush:js;"> $(".js-example-tags").select2({ // enable tagging tags: true,// loading remote data // see https://select2.github.io/options.html#ajax ajax: { url: "Ask2/tags",processResults: function (data,page) { console.log(data); var parsed = data; var arr = []; for(var x in parsed){ arr.push(parsed[x]); //这个应该是个json对象 } console.log(arr); return { results: arr }; } } });

说明

在ajax中的数据返回格式应该是这个样子滴（results）：PHP代码例子

"1",text=>"java"); $p2 = array(id => "2",text=>"jvm"); $test = array(1=>$p1,2=>$p2); $params['responseData'] = $test; $this->view->disable(); return parent::ajaxResponse($params);

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是关于select2的一些用法介绍，希望对大家的学习有所帮助。

Bootstrip HTML 查询搜索常用格式模版

Bootstrip HTML 查询搜索常用格式模版 <form class=&...

如何在按钮上加红色数字

如何在按钮上加红色数字您可以使用Bootstrap的badge组件来在...

让两个按钮左右排列

要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...

status能否设置为布尔值类型，前端采用复选框形式

是的，可以将status设置为布尔类型，这样可以在前端使用复选...