最近的业务需求是把后台数据渲染到前端，其中有一个是复选框数组，前端选择渲染的方式是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 下拉框插件的更多相关文章

  1. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  2. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  3. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  4. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  5. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  6. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  7. select下拉框插件jquery.editable-select

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...

  8. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  9. 自制Jquery下拉框插件

    (function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...

随机推荐

  1. css3之transform-origin

    transform-origin属性平时似乎用得很少,它决定了变换时依赖的原点.基本的属性特性可以参考CSS手册. 如果在H5动画项目中,用到旋转的话,它还是不能小觑的. 假如我们做一个秋千效果 其实 ...

  2. mybatis Mapper.xml和Mapper.java

    mybatis Mapper.xml和Mapper.java 通过Mapper.xml和Mapper.java来实现mybatis.环境和入门的一样的.关键:Mapper.xml + Mapper.j ...

  3. Eclipse连接数据库

    原创 操作数据库之前首先得连接数据库,连接数据库的步骤如下: 将驱动包导入JDK中 将sqljdbc4.jar(一个举例)类库文件拷贝到D:\Program Files\Java\jdk1.7.0\j ...

  4. CSS选择器与jQuery选择器的异同：一些特殊的选择器

    在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类.下面是一些jQuery扩展的选择器:(来自http://www.cnblogs.c ...

  5. Delphi XE8 iOS与Android移动应用开发(APP开发)教程[完整中文版]

    https://item.taobao.com/item.htm?id=536584650957&toSite=main

  6. 关于.net和java des加密

    在.net和java环境中对于des加密,有几点要协同的地方: 密钥和密钥向量Key IV 加密模式CipherMode 填充模式PaddingMode 密文编码方式 下面一段.net的des加密方式 ...

  7. RobotFramework与Jenkins集成发送邮件

    转: A.    目标:实现RobotFramework的脚本定时自动执行,执行完后自动将结果发送到指定邮箱 B.    前提1. 配置好Robot Framework的环境,脚本可以正常运行 2. ...

  8. 加密--HashPasswordForStoringInConfigFile过时问题

    最近公司在对一套代码进行重构,把原本的web form换成mvc. 刚刚好几天打算开始做下登录,登录则必然会涉及到密码加密的问题. 原本打算用旧的加密方法就行了,哪里知道其中的md5加密出现了这样的问 ...

  9. java 编译器级别与项目版本不匹配

    java compiler level does not match the v examime.      java 编译器级别与项目版本不匹配. 解决:      在当前项目上点右键,属性 Pro ...

  10. Eclipse搭建Android开发环境（安装ADT，Android4.4.2）

    1.检查是否安装JDK, 如果没安装请下载安装 JDK官网http://www.Oracle.com/technetwork/Java/javase/downloads/index.html 2.下载 ...