文档章节

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

writeademo
 writeademo
发布于 2017/08/28 16:47
字数 462
阅读 161
收藏 0
点赞 0
评论 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
粉丝 23
博文 468
码字总数 175853
作品 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/02/21
0
0
Jquery给基本控件的取值、赋值

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

瑞不可挡
2011/01/08
0
0
HTML 表单元素(下)

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

xiaoxiaobukuang
2017/10/13
0
0
HTML&CSS基础学习笔记1.22-表单的文本域和下拉列表

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

MayaTeacher
2016/08/13
2
1
HTML CSS之FORM

form 表单 常用于收集不同类用户的输入,允许用户收集:文本域(text)、下拉列表(select)、单选框(radio)、复选框(checkbox) 以及动按纽(Action) 表单标签 大多数表单标签都是input标签,...

zhangtainren
2015/12/04
0
0
Html5添加基于列表的选择美化插件教程

一、使用方法 <link href="src/ui-choose.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="src/ui-choose.js"></script> 二、Html结构 <ul class="ui-choo......

大街小巷
2016/01/11
29
0
html学习笔记

1,颜色 color:#930; 2,文字大小 font-size:15px; 3,文字居中 text-align:center 4,插图片链接 <img src="#"> 5,浏览器标题信息 <head> <title> </title></head>, 6,注释 <!-- -->, 7,......

LizRose
2015/12/30
16
0
jQuery的选择器(四)

三、过滤选择器 5. 子元素过滤选择器 :nth-child :nth-child(index):获取第index个子元素 ,index从1开始,与:eq(index)区别开 :nth-child(even):获取第偶数个子元素 :nth-child(odd):获取第...

博为峰教研组
2016/12/07
5
0
PHP 表单的提交完美示例

文本:’ . $_POST[’txt’]; echo ‘ 单选:’ . $_POST[’radio’]; echo ‘ 下拉单选:’ . $_POST[’select0′]; echo ‘ 下拉多选:’; if (!emptyempty($_POST[’check’])) { echo ‘...

技术小美
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

17.TCP:传输控制协议

介绍 TCP和UDP使用同一网络层(IP),但TCP提供了面向连接、可靠的传输层服务 TCP传输给IP层的信息单位称为报文段或段 TCP通过如下方式保证可靠性: 应用数据被分割成TCP认为最合适发送的数据...

loda0128
8分钟前
0
0
重装Oracle时出现environment variable "PATH"错误的解决办法

在win7 64位下重新安装oracle 11g,一直报environment variable "PATH"的错误,按说明将path里多余的路径删除,但没办法解决。选择忽略错误继续安装,装一半会报CRC错误,还是安装失败。最好...

良言
13分钟前
0
0
TensorFlow 全连接的mnist

全连接的mnist import tensorflow as tf# 导入 MINST 数据集from tensorflow.examples.tutorials.mnist import input_datamnist = input_data.read_data_sets("MNIST_data/", one_ho......

阿豪boy
14分钟前
0
0
JAVA 三种WebService 规范

JAVA 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC)、JAXM&SAAJ、JAX-RS。 1. Jaxws(掌握) JAX-WS 的全称为 Java API for XML-Based Webservices ,早期的基于SOAP 的JAVA 的Web 服务...

onedotdot
33分钟前
0
0
将博客搬至CSDN

将博客搬至CSDN

xpbob
33分钟前
1
0
Aidl进程间通信详细介绍

目录介绍 1.问题答疑 2.Aidl相关属性介绍 2.1 AIDL所支持的数据类型 2.2 服务端和客户端 2.3 AIDL的基本概念 3.实际开发中案例操作 3.1 aidl通信业务需求 3.2 操作步骤伪代码 3.3 服务端操作...

潇湘剑雨
51分钟前
0
0
python爬虫日志(3)下载图片

import urlliburl='https://xxx.jpg'#图片地址res=urllib.request.urlopen(url)#此函数用于对url的访问data=res.read() #字节流with open(r'D:\1.jpg',"wb") as code: c...

茫羽行
今天
0
0
vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运...

JamesView
今天
0
0
bash审计系统搭建

step1:使用saltstack工具bash部署>>>>>> # salt -N clienta state.sls audit step2:安装elasticsearch>>>>>> 注意: 1.不能以root用户进行启动,需要创建用户,并对解压的elasticsearch目录赋......

硅谷课堂
今天
0
0
Linux sar性能分析

Linux使用sar进行性能分析 sar简介 sar命令常用格式 sar常用性能数据分析 整体CPU使用统计-u 各个CPU使用统计-P 内存使用情况统计-r 整体IO情况-b 各个IO设备情况-d 网络统计-n sar日志保存-...

易野
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部