bootstrape select使用小结
看看上面的效果是bootstrape使用的效果。虽然不是很好看,但是符合bootstrape的风格。来看看普通的select的样式
bootstrape下的select和普通select在bootstrape风格对比
引入
- 首先我们肯定得引入jQuery和bootstrape的相关js和css,在此基础上我们引入两个东西
bootstrap-select.min.css
bootstrap-select.min.js
components-bootstrap-select.min.js
页面书写
- 其中class属性必须包含bs-select ,且select属性中含有一下属性
data-live-search(必须)
data-size="6"(可选)
id(必须)
data-live-search 是用于搜索的,本章搜索没实现,以后再详细设计,但是这个属性必须有。源码里根据他选择搜索的。
data-size 是设置数字,意思就是下拉框内容超过几条是开始出现滚动条。
id用于识别这个下拉框的
Ajax请求加载select数据
- 项目中的select多数情况下都是动态数据加载的,那么下一步开始讨论动态数据的加载问题。首先肯定是发送请求。然后在ajax请求成功后的回调地方处理我们的动态数据加载问题。
//调用公共插值方法
createSelectDate(siteDate,"site_id");
createSelectDate
这个方法我们需要传入两个参数,第一个是我们需要加载的数据,第二个使我们的数据加载在select的id
在来看看经过处理后我们的select
- 仔细观察发现ul 是页面显示的数据,select是我们真正的数据,所以我们只需要向这两个地方填充数据就行了。
向select加入数据很简单,通过ID加入,
- 关键是如何获取新的select即ul,经过实践通过以下方法就行。
var $selectUl = $($($("button[data-id='"+select_id+"']").parent().children().get(1)).children().get(1));
- 然后向新的对象添加内容
$newSelect.append("<li data-original-index="+(index+1)+" class><a tabindex='0' class style data-tokens='null' role='option' aria-disabled='false' aria-selected='false'><span class='text'>"+value.site_name+"</span><span class='fa fa-check check-mark'></span></a></li>");
清空select选中值
- 用了这个之后我们会遇到问题,我们无法清空新select的内容,这就很尴尬。研究半天决定强行删除
$("button[role='button'][data-id='"+select_id+"']").attr("title","请选择...");//selected active
$("button[role='button'][data-id='"+select_id+"'] span:first").text("请选择...");
最后我们只需要调用相应的方法就行了。
bootstrape select使用小结的更多相关文章
- MySQL:SELECT COUNT 小结
MySQL:SELECT COUNT 小结 背景 今天团队在做线下代码评审的时候,发现同学们在代码中出现了select count(1) . select count(*),和具体的select co ...
- jQuery对select操作小结
//遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...
- jQuery对input select操作小结
//遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...
- 【JS】<select>标签小结
循环时通过<c:if>来判断是否为默认选中 <select name="select" id="month"> <c:forEac ...
- select 函数小结 -- 转自百度知道
http://zhidao.baidu.com/link?url=UVTXeK4ncKmnwatGUW2deMFylNYBuur-zHmK3w53NXNRpgPbhld2WdkMD766nKl_6Hj ...
- 最全的ORACLE-SQL笔记
-- 首先,以超级管理员的身份登录oracle sqlplus sys/bjsxt as sysdba --然后,解除对scott用户的锁 alter user scott account unloc ...
- MySQL的各种SHOW
. SHOW语法 13.5.4.1. SHOW CHARACTER SET语法 13.5.4.2. SHOW COLLATION语法 13.5.4.3. SHOW COLUMNS语法 13.5.4.4 ...
- LINQ和Lambda表达式
前言 前段时间接触了一种新的表达式,但是不知道这个是什么意思,所以就先站在巨人的肩膀用了,现在听师哥说这种写法是Lambda表达式.我一直以为,这个Lambda表达式和LINQ查询有异曲同工之妙,可惜 ...
- sp_executesq用法
第一种用法: --@sqlstring :就是你要执行的sql语句字符串--@ParmDefinition: @sqlstring里边用到的参数在这里声明 输出的参数要加output --sp_exe ...
随机推荐
- django基础知识之POST属性:
POST属性 QueryDict类型的对象 包含post请求方式的所有参数 与form表单中的控件对应 问:表单中哪些控件会被提交? 答:控件要有name属性,则name属性的值为键,value属性的 ...
- Oracle数据库----函数
--大小写控制函数--upperselect * from emp where job = upper('salesman'); --lowerselect * from emp where lowe ...
- c++学习书籍推荐《C++程序设计语言(特别版)》下载
百度云及其他网盘下载地址:点我 编辑推荐 <C++程序设计语言(特别版•十周年中文纪念版)>编辑推荐:十周年纪念版,体味C++语言的精妙与魅力,享受与大师的心灵对话.1979年,Biarn ...
- windows软件卸载工具Geek Uninstaller免安装版
曾经一个问题一直困扰这我,就是每次在卸载软件的时候都卸载不干净,卸载完后会有遗留文件夹,每次都要手动删,还有注册表也不干净,让我很是难受,直到有一天发现了一个卸载神器Geek Uninstaller ...
- 解析Unicode转义序列带来的问题
Unicode转义序列的解析是发生在代码编译之前,编译器机械的将\u样式的代码文本转义,即使是注释以及非正常代码,对此步骤来说也没有区别 导致下面的情况: public class Test { pu ...
- linux server 发送邮件
用linux服务器发送邮件centos1.安装mailx 和sendmail,系统一般会安装的yum -y isntall mailx sendmail 2.修改/etc/mail.rcset fro ...
- python 中_init_函数以及参数self
1)class类包含: 类的属性:类中所涉及的变量 类的方法:类中函数 2)_init_函数(方法) 1.首先说一下,带有两个下划线开头的函数是声明该属性为私有,不能在类地外部被使用或直接访问. 2. ...
- Adaboost原理推导
Adaptive Boosting是一种迭代算法.每轮迭代中会在训练集上产生一个新的学习器,然后使用该学习器对所有样本进行预测,以评估每个样本的重要性(Informative).换句话来讲就是,算法会 ...
- C语言入门3-C语言概述及数据类型
一. 计算机程序设计语言 (计算机语言的发展历史) 1. 机器语言 机器语言 二进制代码语言,由 0和1组成的. 特点是:计算机可以直接识别,不需要进行任何的翻译. 2 ...
- hdu6406 Taotao Picks Apples(线段树)
Taotao Picks Apples 题目传送门 解题思路 建立一颗线段树,维护当前区间内的最大值maxx和可摘取的苹果数num.最大值很容易维护,主要是可摘取的苹果数怎么合并.合并左右孩子时,左孩 ...