文档章节

多选下拉控件的使用(select-option)multiple-select

writeademo
 writeademo
发布于 2017/08/28 16:47
字数 462
阅读 406
收藏 0

 

多选下拉控件的使用(select-option

1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。

Multiple-Select源码主页: https://github.com/wenzhixin/multiple-select

Multiple-Select文档以及Demo http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN

2、第二个组件:bootstrap-multiselect 。这个组件风格和第一个非常相似,文档也挺全面。

bootstrap-multiselect源码主页: https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文档以及Demo http://davidstutz.github.io/bootstrap-multiselect/

 

本篇中使用的是第一个控件来实现多选下拉框:

首先引入支持文件

multiple-select.jsmultiple-select.cssmultiple-select.png

 

支持过滤,启用,禁用,分组,功能还是比较全面

html片段:

example:

 

<head>

    <link href="multiple-select.css" rel="stylesheet"/>

</head>

<body>

    <select multiple="multiple">

        <option value="1">January</option>

        ...

        <option value="12">December</option>

    </select>

    <script src="multiple-select.js"></script>

    <script>

        $("select").multipleSelect({

            placeholder: "Here is the placeholder"

        });

    </script>

</body>

 

 

//js片段

//这里要取得选中的值,调用已有的函数

.multipleSelect('getSelects','value'); //value表示是属性类型

参数设置:

 

multipleSelect重要的方法:支持参数的初始话

本次使用过程中遇到的参数使用有

$("select").multipleSelect({

           placeholder:"请选择",//初始话文字设置

           selectAll:"true",//支持全选

           width:"200",//设置控件宽度

           selectAllText:"全选",//全选text

           container:"body",//重新选择空间显示的范围,这里遇到一个问题,就是下拉ms-drop显示不全,这里是区域问题,在这设置一下就ok

           allSelected:'已全选',//全选以后显示text

           countSelected:'#项已选中'//已选中的项数

          

       });

       $(".ms-drop").css({'width':'200'});//重新修改下拉框的宽度样式

 

 

这里只遇到一个问题就是下拉框显示不全,通过设置container属性已经解决。

 

 

其他问题可以读multiple-select.jsmultiple-select.css文件

遇到问题可以看问题列表https://github.com/wenzhixin/multiple-select/issues/255

在使用过程中可以补充

© 著作权归作者所有

共有 人打赏支持
writeademo
粉丝 25
博文 578
码字总数 214562
作品 0
东城
私信 提问
web前端之html_day2

1、meta标签 Charset:指定当前文档编码格式 Keywords:表示关键字,对搜索引擎友好,实现网站推广 Description:表示网站描述,网站优化 2、表格 定义一个表格...

opsedu
2018/06/27
0
0
前端基础之html:day02

版权声明:原创博客,转载请注明地址 https://blog.csdn.net/eve_gf/article/details/84860611 序言: 拖着疲惫的身躯,真的不想动,但是看着蹭蹭上涨的房价,仿佛冥冥之中又有了动力,加油吧...

eve_gf
2018/12/11
0
0
Jquery给基本控件的取值、赋值

Jquery给基本控件的取值、赋值 Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'')......

瑞不可挡
2011/01/08
0
0
Jquery给基本控件的取值、赋值

Jquery给基本控件的取值、赋值 Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'')......

瑞不可挡
2011/02/21
0
0
HTML&CSS基础学习笔记1.22-表单的文本域和下拉列表

文本域 <textarea>标签定义多行的文本输入控件。 平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签。 <textarea>文本区中可容纳无限数量...

MayaTeacher
2016/08/13
2
1

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
8
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
3
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
2
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
1
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部