bootstrape select使用小结
来源:互联网 发布:淘宝考研资料是真的吗 编辑:程序博客网 时间:2024/05/19 23:27
看看上面的效果是bootstrape使用的效果。虽然不是很好看,但是符合bootstrape的风格。来看看普通的select的样式
bootstrape下的select和普通select在bootstrape风格对比
引入
- 首先我们肯定得引入jQuery和bootstrape的相关js和css,在此基础上我们引入两个东西
bootstrap-select.min.cssbootstrap-select.min.jscomponents-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("请选择...");
最后我们只需要调用相应的方法就行了。
1 0
- bootstrape select使用小结
- [小结]select的使用注意事项
- select、poll、epoll使用小结
- select、poll、epoll使用小结
- select、poll、epoll使用小结
- select、poll、epoll使用小结
- select、poll、epoll使用小结
- jquery操作select option使用小结
- bootstrape 轮播插件
- SELECT超时小结
- jquery操作select小结
- jquery操作select小结
- SELECT超时小结
- Radio、Checkbox、Select小结
- select练习小结
- bootstrape的CSS样式一
- bootstrape的CSS样式二
- vue-cli引入jquery、bootstrape
- TCP(一)用socket实现tcp
- 根据项目需求Dialog简单封装
- python can't decode byte
- http请求数据包含特殊字符处理(java)
- cvFindContours
- bootstrape select使用小结
- 数据结构与算法之广度搜索(理论+代码)
- 用C++做一次鸡兔同笼 2017.3.17
- ubuntu 16.04 图形界面登录输入正确密码后无法进入桌面又跳转到登录界面
- 使用JDBC连接Oracle的Java代码
- excel 打印预览只能显示一页 打印的字特别小
- JVM 内存管理
- Android dialog的hide和dismiss方法分析
- sys.stdout.flush() Python的作用