最近的业务需求是把后台数据渲染到前端，其中有一个是复选框数组，前端选择渲染的方式是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. javascript总结29 :递归与回调函数

    1 递归函数 -递归的实质就是函数自己调用自己. -递归注意点:递归必须有跳出条件,否则是死循环. var i = 1; fn(); function fn(){alert("从前有座山,山 ...

  2. mysql数据库引擎MyISAM与InnoDB的区别浅说

    mysql的存储引擎包括:MyISAM.InnoDB.BDB.MEMORY.MERGE.EXAMPLE.NDBCluster.ARCHIVE.CSV.BLACKHOLE.FEDERATED等,其中In ...

  3. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

  4. delphi Table切换控件顺序问题

    delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...

  5. spring boot 整合 HttpClient

    第一步:引入HttpClient 的jar包 1.httpClient 5.0 开始支持异步(Async)请求: 2.httpclient 版本过低上传文件会出,原因是 org.apache.http ...

  6. 疑难杂症--已停止运行DBCC造成阻塞

    场景数据库因非法断电导致出现分配页上不一致,运行完DBCC CHECKDB后出现以下错误: 表错误: 表 't_pc_id' (ID 277576027).数据行在索引 'last_login_dat ...

  7. solr入门教程-较详细

    Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注意事项;主要包括以下内容:环境搭建及调试;两个核心配置文件介绍;维护索引;查询索引,和在 ...

  8. LoadRunner10个用户并发测试时分别取不同的参数运行脚本

    使用场景,比如说10个用户使用不同的账户名和密码同时并发登录,此时选择如下参数化策略: 参数选择:select next row 选择unique update value on 选择 once 另一 ...

  9. 4.Python的版本

    Python2: 英文支持没问题,中文报错,默认编码:ascii码 显示中午需要添加代码在首行:# -*- encoding:utf -8 -*- 用户交互  raw_input python2 里还 ...

  10. Windows系统下安装 CMake

    在安装caffe框架的时候需要用到cmake,特将cmake的安装总结如下: 1 什么是cmake CMake是一个跨平台的编译(Build)工具,可以用简单的语句来描述所有平台的编译过程.CMake ...