JS组件Bootstrap Select2使用方法解析
作者:伤痕小丑鱼 发布时间:2024-04-16 09:49:36
标签:JS,Bootstrap,Select
本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下
效果图:
无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及:
{{ 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">
<p>
<select class="js-example-tags form-control" multiple="multiple">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
</p>
</div>
</section>
</div>
</div>
固定方式获取:
$(".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方式获取:
$(".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): [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
对应的php代码例子
...
$p1 = array(id => "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个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
0
投稿
猜你喜欢
- 这是早上找了点时间写了一个利用404错误达到静态态效果的类,准备在HTTP://PJSKIN.MYSUC.COM中使用的。不过现在没时间去弄
- 1.Order By原理MySQL的Order By操作用于排序,并且会有多种不同的排序算法,他们的性能都是不一样的。假设有一个表,建表的s
- 在很多情况下,我们可能需要控制某一段代码只执行一次,比如做某些初始化操作,如初始化数据库连接等。 对于这种场景,go 为我们提供了 sync
- 本文实例为大家分享了python微信跳一跳的具体代码,供大家参考,具体内容如下部分代码分享:wechat_jump.pyfrom __fut
- 治標不治本的就是將php.ini內的reporting部份修改,讓notice不顯示 error_reporting = E_ALL; di
- 在用HTML(HyperText Markup Language,超文本链接标示语言)语言编写Web页面时,由于所用的Web浏览器对HTML
- 在服务器上,通常为了快速登录数据库,我们会使用mysql -hhost -uusername -ppassword db的方式登录数据库,如
- 亮度调整非线性亮度调整:对于R,G,B三个通道,每个通道增加相同的增量。线性亮度调整:利用HSL颜色空间,通过只对其L(亮度)部分调整,可达
- 1、Mongoose模块(1)是一个对象模型工具,是对Node.js环境下操作MongoDB数据库进行了封装,可以将MongoDB数据库中的
- 一、库介绍opencv,face_recognition,numpy,以及dlib注意:安装opencv速度可能过慢,需要更换国内镜像源,参
- 迭代器&生成器在 Python 中,迭代器和生成器都是用来遍历数据集合的工具,可以按需逐个生成或返回数据,从而避免一次性加载整个数据
- 一:绑定方法:其特点是调用方本身自动作为第一个参数传入1.绑定到对象的方法:调用方是一个对象,该对象自动传入2.方法绑定到类:调用方是类,类
- 在做开发的朋友特别是和mysql有接触的朋友会碰到有时mysql查询很慢,当然我指的是大数据量百万千万级了,不是几十条了,下面我们来看看解决
- 一、CONCAT函数concat函数是将多个字段或字符串拼接为一个字符串;但是字符串之间没有任何分隔。concat函数官方介绍-- CONC
- 重装系统永远是个好办法,但有谁喜欢这么做呀:( 后来无意发现是卸载的时候没有卸载完全导致,下面给出完整的卸载MySQL 5.1的卸载方法:
- PHP quotemeta() 函数实例在预定义的字符前添加反斜杠:<?php$str = "Hello world. (c
- pyx文件是python的c扩展文件,代码要符合cython的规范,用什么编辑器写都行。我在eric4上写的,结果它默认用python解释器
- MySQL Index索引是一种数据结构,可以是B-tree、R-tree、或者hash结构。其中,B-tree适用于查找某范围内的数据,可
- Java timezone设置和mybatis连接数据库时区设置JVM时区设置springboot工程运行时,需要指定时区,这样获取的时间才
- 如果你想通过http://127.0.0.1:8000/看网站根目录你将看到一个404错误消息。Django不会增加任何东西在网站根目录,在