下拉多选框

Lyux 发布于2019-08-21 10:20 / 604人阅读

摘要：基于来制作的一个下拉多选控件使用前需加载库样式和还有。由于我觉得有趣一点，把项目迁移到了，地址如下

Bootstrap Selection

基于Bootstrap.dropdown来制作的一个下拉多选控件
使用前需加载JQuery、Bootstrap库（样式和JS）还有underscore js。

如果不需要动态加载下拉项可不加载underscore js

例子

简单使用


    星级 
    
        五星
        
        经济型
    


//简单使用
$("#small-exp").selection();

动态加载

//数据源
var data = [
    {"id":1,"name":"star","content":"五星"},
    {"id":2,"name":"star","content":"准五星"},
    {"id":3,"name":"star","content":"四星"},
    {"id":4,"name":"star","content":"准四星"},
    {"id":5,"name":"star","content":"三星"},
    {"id":6,"name":"star","content":"准三星"},
    {"id":7,"name":"star","content":"二星"},
    {"id":8,"name":"star","content":"经济型"}
];
//动态加载例子
$("#small-exp").selection("source",data);

方法

显示（或隐藏）下拉框
$(".dropdown-checkbox").selection("toggle")

全选
$(".dropdown-checkbox").selection("all")

反选
$(".dropdown-checkbox").selection("invert")

取消选择
$(".dropdown-checkbox").selection("none")

取得标题
$(".dropdown-checkbox").selection("title")

设置标题
$(".dropdown-checkbox").selection("title","标题")

取得数据源
$(".dropdown-checkbox").selection("source")

设置数据源
$(".dropdown-checkbox").selection("source",{JSON})

取得所有下拉项的JQuery对象(就是所有checkbox)
$(".dropdown-checkbox").selection("items")

事件

多选控件勾选后促发bs.selection.changed事件。

$(".dropdown-checkbox").selection().on("bs.selection.changed",function(e,selection,$item){
    //...
});

其他

在dropdown-checkbox元素中设置以下data-属性会自动加载

 data-title="星级 "
 data-source="[{"id":1,"name":"star","content":"五星"},...,{"id":8,"name":"star","content":"经济型"}]"

取得每个子项的数据源，前提是动态加载下拉的子项

$(".dropdown-checkbox").selection("items").each(function(){
    //数据保存在li上
    var data = $(this).parents("li").data("bs.selection.item.data");
});

详细参考：http://git.oschina.net/packy-tang/Bootstrap-Selection

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝［更新说明］＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

项目新版本已经使用bower、gruntjs等管理工具从新打包，多谢各位关注。
由于我觉得coding.net有趣一点，把项目迁移到coding了，地址如下：

https://coding.net/u/packy/p/Bootstrap-Selection/git

云服务器 GPU云服务器下拉多选框获取所有值下拉多选赋值asp 拉多多选框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85339.html

封装下拉多选框

{{item.text}} × ↑ ↓ {{item.text}}

luck 2019-08-23 18:32 评论0 收藏0
1-3. Vue.js核心知识之表单绑定

摘要：我们可以用指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。我们可以用 v-model 指令在表单 input 及 textarea 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。文本输入框你输入的内容: {{ message }} 多行文本框你输入的内容：{{ message }} 单选框男 ...

mayaohua 2019-08-23 18:00 评论0 收藏0
HTML表单元素及CSS

摘要：表单一介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框，为空标签。属性，属性规定要显示的元素的类型。冒号表示分隔符，分号表示结束符。表单一、介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性：action-提交表单的地址 Method-提交表单的方式。属性值：get/post ...

MyFaith 2019-08-30 13:48 评论0 收藏0
HTML表单元素及CSS

摘要：表单一介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框，为空标签。属性，属性规定要显示的元素的类型。冒号表示分隔符，分号表示结束符。表单一、介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性：action-提交表单的地址 Method-提交表单的方式。属性值：get/post ...

jayzou 2019-08-01 17:50 评论0 收藏0
初识 “HTML”

摘要：仅在属性存在时使用。规定显示图像的。表格概念具有行和列基本结构表示表格表示行表示单元格带表头的表格表头单元格由创建，元素中的文本通常呈现粗体并居中。规定用于发送表单数据的方法。规定表单的名称。 HTML 什么是HTML？ ①全称：超文本标记语言②超文本：在普通的文本内容的基础上添加超链接、图片、视频等③标记语言：HTML提供一系列标签④版本：HTML 4.01 HTML声明 1.编码格...

史占广 2019-08-01 17:53 评论0 收藏0