最近的业务需求是把后台数据渲染到前端，其中有一个是复选框数组，前端选择渲染的方式是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. Web大文件上传(断点续传)控件-Xproer.HttpUploader6-安装教程

      安装教程: IE8控件安装教程 IE9控件安装教程 Firefox控件安装教程 Chrome控件安装教程 Chrome 45+控件安装教程 相关问题: 提示Runtime Error错误 360拦 ...

  2. canvas学习日记一

    由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一.使用它可以在浏览器中做一番奇妙的事情.大家或多或少都听过canvas的强大用处,我这里就不再赘述了. ...

  3. 公司web安全等级提升

    目录 背景介绍 目录 针对国调的初次测试结果 解决方案 二次测试 关于XSS 什么是XSS 基本防御 代码防御 xss代码辑录 说明 参考文章 版本记录 背景介绍 公司的一个web数据展示系统,本来是 ...

  4. mysql 查询条件

    1简单查询   select* from 表名 select name as“姓名”fromstu     (把name改为名字) 2条件查询 where 后面跟条件  条件要写清楚 3模糊查询  l ...

  5. 个人写spark小测试

    写脚本生成类似文件 java 代码 封装类 package day0327; import java.util.UUID; public class data { private String ip; ...

  6. Linux常用开发指令

    gcc mysqltest.c -o mysqltest `mysql_config –cflags –libs`

  7. hadoop ncdc数据下载方法

    我在看<Hadoop权威指南>时,里面提供了NCDC天气数据样本,提供的下载链接是:点击打开链接,但是里面只提供了1901和1902这两年的数据,这未免也太少了点!完全称不上“BIG DA ...

  8. 理解ASP.NET MVC引擎处理模型字符串的默认行为,涉及Html.Raw()和HttpUtility.HtmlDecode()

    MVC引擎默认会将Model属性值中包含的html字符串做encode,所以如属性中包含类似 <br> 这样的标记,MVC引擎会将它们转换成html实体码 %3Cbr%3E 所以1:在编辑 ...

  9. django view function

    view function 的几种返回值 return HttpResponse(html) return HttpResponseNotFound(html) raise Http404(" ...

  10. TVS

    TVS 电子电路中二极管是非常常见的元器件,按照材料主要分为锗二极管.硅二极管.按用途的不同又可分为瞬态二极管.整流二极管.检波二极管.稳压二极管.变容二极管.光电二极管.发光二极管.开关二极管.快速 ...