多选下拉控件的使用(select-option)multiple-select-程序员宅基地

技术标签: ViewUI  python  shell  javascript  

 

多选下拉控件的使用(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.js,multiple-select.css,multiple-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.js,multiple-select.css文件

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

在使用过程中可以补充

转载于:https://my.oschina.net/iioschina/blog/1525079

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34297300/article/details/92054789

智能推荐

golang 学习(二十五)go mod以及自定义包package的用法和init()方法_go mod init-程序员宅基地

文章浏览阅读1.8w次,点赞11次,收藏44次。go mod以及自定义包package的用法和init()方法包的介绍和定义包(packge)是多个 Go 源码的集合,是一种高级的代码复用方案,Go 语言为我们提供了 很多内置包,如:fmt、strconv、strings、sort、eros、time、encoding/json、os、io 等。Golang 中的包可以分为三种:1、系统内置包 2、自定义包 3、第三方包 系统内置包: Golang语言给我们提供的内置包,引入后可以直接使用,如 fmt、srconv、strings、sort、e_go mod init

c++使用vector创建二维0矩阵(初始化)_c++ 二维vector初始化为0-程序员宅基地

文章浏览阅读7.1k次,点赞7次,收藏43次。c++使用vector创建二维0矩阵(初始化)一、前言c++真的是又爱又恨的一门语言,本人是一名python程序员但是因工作需求不得不投入到c++的大军中,逐渐偏离人生苦短我用python的初衷,唠叨完毕开始正题。最近在做一个去eigen库的工作,需要使用vector替换,于是总结了一些使用vector实现矩阵的一些操作的代码,有需要的可以借鉴一下(亲测可用哦)。本篇仅仅写的是vector的初始化的方法,文章后面会逐渐附上其他矩阵操作的链接。二、话不多说上才艺开始我刚使用vector的时候_c++ 二维vector初始化为0

Solr 与 lucene-程序员宅基地

文章浏览阅读1.1k次。1、开篇语2、概述3、渊源4、初识Solr5、Solr的安装6、Solr分词顺序7、Solr中文应用的一个实例8、Solr的检索运算符[开篇语]按照惯例应该写一篇技术文章了,这次结合Lucene/Solr来分享一下开发经验。Lucene是一个使用Java语言写的全文检索开发包(API),利用它可以实现强大的检索功能,它的详细介绍大家可以去Google上搜索一下,本文重点放在Solr相关的讨

OpenCVSharp 4.5 仿射变换_仿射线程 opencvsharp-程序员宅基地

文章浏览阅读1.2k次。用OpenCVSharp4.5跑一遍OpenCV官方教程原教程链接:https://docs.opencv.org/4.5.0/d4/d61/tutorial_warp_affine.html核心函数:warpAffine,getRotationMatrix2Dusing System;using OpenCvSharp;namespace ConsoleApp1{ class tutorial18 : ITutorial { public void.._仿射线程 opencvsharp

C - Cat Snuke and a Voyage(dfs)-程序员宅基地

文章浏览阅读176次。题目链接:https://atcoder.jp/contests/arc079/tasks/arc079_a题意:给你n个点m条边;问你是否存在一条从1到n的长度为2的边;代码:#include<iostream>#include<cstring>#include<cmath>#include<cstdio>using...

python实现:旋转矩阵转换为四元数_from pyquaternion import quaternion-程序员宅基地

文章浏览阅读7.4k次,点赞7次,收藏14次。1 python实现旋转矩阵转换为四元数例如:下面把3x3的旋转矩阵转换为四元数from pyquaternion import Quaternionrotate_matrix = [[-0.0174524064372832, -0.999847695156391, 0.0], [0.308969929589947, -0.00539309018185907, -0.951056516295153], [0.95091166578_from pyquaternion import quaternion

随便推点

NGSIM数据集Python处理(超车变道数据筛选)_iloc[lst_c[j]]-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏10次。NGSIM数据集因其量大质优,在车辆跟驰、变道等领域的研究中被广泛使用,作为一种特殊的变道行为,超车变道存在其显著的特点,但对超车变道的研究较少,一方面,超车变道数据的获取存在一定难度,另一方面,超车变道的决策较为复杂,本文通过Python代码的编写,实现对NGSIM数据集中产生超车变道行为的车辆数据进行提取,以下概述代码主体部分及部分说明。如需完整代码,可点击本人上传的代码链接进行下载。NGSIM数据集超车变道数据筛选-数据挖掘文档类资源-CSDN文库获取每一车辆切割索引数据通过原始..._iloc[lst_c[j]]

C++中运算符重载(复数类定义和运算实现)_复数类定义及运算符重载-程序员宅基地

文章浏览阅读574次。运算符重载一般形式<类型><类名>::operator <操作符>(<参数表>){ ...}#include <iostream>using namespace std;class Complex{ double m_fReal,m_fImag;public: Complex(double r = 0, double i = 0):m_fReal(r),m_fImag(i){} double Real(){_复数类定义及运算符重载

c++调用python numpy编程_c++ numpy-程序员宅基地

文章浏览阅读1.7w次,点赞14次,收藏101次。背景现在用c++重构了python工程,有一部分后处理不想再花时间重构了,所以直接拿过来调用。边搜资料边做的,做这个demo花了些时间,所以记下来以防忘记。资料找了很多的c++调用python的方法,首先可以肯定的有不止一种方式,直接使用python库、numpy arrayobject库来做;另外一种是使用boost/python boost/numpy的方式。后一种没有调通,是链接库的问..._c++ numpy

串口协议和RS-232标准,RS232电平与TTL电平的区别,以及USB/TTL转232“模块(CH340芯片为例)的工作原理_usb cdc驱动和232-程序员宅基地

文章浏览阅读3.1k次。前言本文主要介绍串口通讯协议和RS-232的介绍以及USB/TTL转232模块的工作原理一、串口通讯协议和RS-2321.简介串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式,因为它简单、便捷,因此大部分电子设备都支持该通讯方式,电子工程师在调试设备时也经常使用该通 讯方式输出调试信息。2.RS-232 标准RS-232 标准主要规定了信号的用途,通讯接口以及信号的电平标准。在上面的通讯方式中,两个通讯设备的“DB9接口”之间通过串._usb cdc驱动和232

IIS7 经典模式和集成模式的区别-程序员宅基地

文章浏览阅读120次。IIS7.0中的Web应用程序有两种配置模式:经典模式和集成模式。经典模式是为了与之前的版本兼容,使用ISAPI扩展来调用ASP.NET运行库,原先运行于IIS6.0下的Web应用程序迁移到IIS7.0中只要将应用程序配置成经典模式,代码基本不用修改就可以正常运行。集成模式是一种统一的哀求处理管道,它将ASP.NET请求管道与IIS核心管道组合在一起,这种模式能够提供更好的性能,能够实现..._经典和集成的区别

ee er_61对词根相同后缀分别是er和ee的单词要这样区别记忆它们-程序员宅基地

文章浏览阅读4.4k次。先看两个单词:employer和employee。它们之间差别就是最后一个字母。很熟悉吧!雇主?雇工?糊涂了吧!高中学过这两个单词!那时可能是死记,过后有印象但意思却混淆糊涂了!其实我们回忆一下:employer哦,employer就是雇主、老板。其实雇主、老板就是这个派头:严肃、威严、不苟言笑employeeemployee是雇员、员工之意。其实雇员、雇工就是这个样子:双眼要有神,要目不转睛看着..._以ee和er结尾的单词成对

推荐文章

热门文章

相关标签