浅解bootstrap 下拉框插件
最近的业务需求是把后台数据渲染到前端,其中有一个是复选框数组,前端选择渲染的方式是bootstrap的下拉插件
渲染完成之后,此时会在原有select同级上面生成buton,dropdown-menu 两个块
其中框内显示的内容跟button下面的class filter-option有关,而下拉框状态显示选中却又和dropdown-menu有关,原理应该是当选中一个选项dropdown-menu ul li当前选中项增加一个class(selected),选中的这个值渲染button下面的filter-option的html值,button的title值又会等于filter-option的html值,此时如若需要渲染,只需要对应的改变三个值,
1、button的title值
2、button的儿子filter-option的html值
3、dropdown-menu ul li需要选中的addClass('selected')
为了传值方便,可以对select下方的option做一个选中处理(此处在前端无论你选择给几个赋值selected都不会真实表达出来,但是却是可以对后台取值进行帮助)
浅解bootstrap 下拉框插件的更多相关文章
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- jQuery无限级联下拉框插件
自己编写jQuery插件 之 无限级联下拉框 因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...
- select下拉框插件jquery.editable-select
项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- 自制Jquery下拉框插件
(function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...
随机推荐
- vSphere5.5体系结构
1.vSphere5.5体系结构 vSphere5.5作为云集算操作系统,可以虚拟化服务器.存储.网络在内的整个IT基础架构,将这些架构转化为易于管理的虚拟化!vSphere5.5从逻辑上,可以划分为 ...
- 使用jQuery 取文本
<html> <head> <meta charset="UTF-8"> <title>b</title> <sc ...
- Underscore.js实用插件
Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:“如果我面对一个空白的 HTML ...
- OpenCV实现均值哈希
总共分三步:压缩,灰度化,均值化,求哈希值. 1.压缩 void secondMethod(char* filename, char* savename) { //const char* filena ...
- 关于Markdown格式转PDF格式
Markdown转PDF格式 个人使用的Markdown编辑平台:有道云笔记网页版 当我们编辑好自己的随笔以后,在网页的[客户端下载]下面有一个[更多]的圆形图标选项,点击后在菜单中有一处[打印]选项 ...
- Grails项目开发——前端请求跨域问题
Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...
- web_custom_request函数详解【摘抄】
本次摘抄自:http://www.cnblogs.com/yezhaohui/p/3280239.html web_custom_request()函数是一个可以用于自定义http请求的“万能”函数, ...
- Java Integer为代表的包装类
Java种的Integer是int的包装类型 1. Integer 是int的包装类型,数据类型是类,初值为null 2. 初始化时 int i = 1; Integer i = new Intege ...
- jQuery制作多表格固定表头、切换表头的特效
做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...
- 两款Mongodb可视化工具
在某些场景下,相比传统的关系数据库和NoSQL数据库,Mongodb拥有不可替代的优势. 例如,最近我需要为收集的大量网站进行分类.实际情况是,一个网站可能同时有多个标签,想象一下新浪网,它既是门户站 ...