文档章节

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

writeademo
 writeademo
发布于 2017/08/28 16:47
字数 462
阅读 294
收藏 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
粉丝 24
博文 533
码字总数 191186
作品 0
东城
web前端之html_day2

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

opsedu
06/27
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
HTML 表单元素(下)

其他元素 输入验证 一、其他元素 1、生成下拉列表 解释:< select > 下拉列表元素至少包含一个 < option > 子元素,才能形成有效的选项列表。< select > 元素包含两个子元素 < option > 项目...

xiaoxiaobukuang
2017/10/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

等语句含义

经常会看到某些网站的框架中会用到 <!--[if IE7]><![endif]--> 等语句,今天特意查阅了下它们的区别: <!--[if IE]>所有的IE可识别<![end if]--><!--[if !IE]>除IE外都能识别<![end if]-->......

度_
10分钟前
0
0
资源的有限性与任务的复杂性之间的矛盾

看了一篇文章How to Manage Connections Efficiently in Postgres, or Any Database, 文章讨论了如何管理Postgres数据库连接,列举了几种方式: 每个请求一个连接 连接复用 连接池 连接池管理...

52iSilence7
10分钟前
0
0
Python PEP8规范整理

PEP8规范总结 PEP8 是什么呢,简单说就是一种编码规范,是为了让代码“更好看”,更容易被阅读。 具体有这些规范,参考 PEP 8 --Style Guide for Python Code.当然也可以使用Pycharm检查或使...

_Change_
22分钟前
0
0
input去空格

货币转换while True:MonStr = input()if MonStr[:3] == "RMB":USD = eval(MonStr[3:])/6.78print("USD{:.2f}".format(USD))elif MonStr[:3] == "USD":RMB = eval(MonStr[3:......

fadsaa
25分钟前
0
0
单例设计模式

单例设计模式 设计模式介绍与代码编写 在编写程序时经常会遇到一些典型的问题或需要完成某种特定需求.设计模式就是针对这些问题和需求.在大量的实践中总结和理论化之后的代码结构.编程风格以...

码农屌丝
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部