bootstrap 插件multiselect 左右选择框

Bootstrap多选插件:Bootstrap Multiselect 简介 对比了不少的多选插件,因为项目基于Boostrap开发,最终选择:Bootstrap Multiselect 源码地址: https://github.com/davidstutz/bootstrap-multiselect 示例网址:http://davidstutz.github.io/bootstrap-multiselect 使用指南 添加引用 因为该插件基于jQu 阅读详情

首先看一下效果图:

第一步 :引入对应的js

bootstrap.js、jquery.js、multiselect.min.js

这三个是必须要有的

jsp代码:

<div class="row">
                                <div class="col-xs-5">
                                    <label for="keepRenderingSort" class="control-label">已拥有</label>
                                    <select name="from[]" id="keepRenderingSort" class="form-control" size="10" multiple="multiple">
                                        <option value="1" data-position="1">Item 1</option>
                                        <option value="2" data-position="2">Item 2</option>
                                        <option value="3" data-position="3">Item 3</option>
                                        <option value="4" data-position="4">Item 4</option>
                                        <option value="5" data-position="5">Item 5</option>
                                        
                                        <option value="6" data-position="6">Item 6</option>
                                        <option value="7" data-position="7">Item 7</option>
                                        <option value="8" data-position="8">Item 8</option>
                                        <option value="9" data-position="9">Item 9</option>
                                        <option value="10" data-position="10">Item 10</option>
                                    </select>
                                </div>
                                
                                <div class="col-xs-2" style="margin-top: 50px;">
                                    <button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                                    <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                                    <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                                    <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
                                </div>
                                <label for="keepRenderingSort" class="control-label">未拥有</label>
                                <div class="col-xs-5">
                                    <select name="to[]" id="keepRenderingSort_to" class="form-control" size="10" multiple="multiple">
                                         
                                    </select>
                                </div>
                        </div>

 

 

<script type="text/javascript">
$(document).ready(function() {
    // make code pretty

    $('#keepRenderingSort').multiselect({
        keepRenderingSort: true
    });
    
});
</script>  

 

这里说一下,我这里的这个页面属于弹出层,所以在multiselect.min.js修改了获取图层的方式

原代码

$('#keepRenderingSort').multiselect({
        keepRenderingSort: true
    });

修改后

$('#payerIframe #keepRenderingSort').multiselect({
        keepRenderingSort: true
    });

如果是弹出层页面,不修改获取方式,代码找不页面,选项点击不会左右移动,在平层页面直接使用即可

 

 

使用bootstrap-multiselect插件 最近,公司有项目中需要用到多选下拉框,下拉框的option从后台动态创建,多选后提交表单并存至相应的数据库表,经过网上查阅资料以及自己的一番研究后,发表一下自己对该插件的一个用法和理解: 使用的插件是boostrap中的multiselect插件,所以在js或是jsp中得引入相应的js文件以及css样式文件: <link rel="stylesheet" href="css/bootstra... 阅读详情

相关推荐

Bootstrap Multiselect单选多选插件实战应用

元素,提供了多选、搜索、分组、事件监听等丰富特性。其核心设计理念是“语义化配置 + 渐进增强”,在保持 HTML 结构简洁的同时,支持通过data-*属性或 JavaScript 进行深度定制。

weixin_42515842的博客 773

multiselect选中_multi-select 左右选择插件

multi-select 前端左右两端多选插件1、html 部分:{% extends 'base-layer.html' %}{% load staticfiles %}{% block css %}.ms-container {width: 551px;}{% endblock %}{% block main %}{% csrf_token %}选择全部取消全部{% for item in l...

weixin_39703561的博客 696

Bootstrap Multiselect:交互式多选下拉插件

在现代Web开发中,下拉菜单是一个常用的用户界面组件,它允许用户从一系列选项中进行选择。Bootstrap作为一个流行的前端框架,为开发者提供了一套易于使用的界面元素。当涉及到需要从多个选项中选择多个项目时,标准的下拉菜单就显得不够用了。这时,多选下拉插件就显得尤为关键,它扩展了标准下拉菜单的功能,允许用户进行多选操作。事件监听主要分为几种类型,如点击、悬停、键盘操作等。在多选下拉插件中,常用的事件类型包括:change:当选项的选中状态发生变化时触发。click:用户点击下拉按钮时触发。

weixin_42589700的博客 1123

multiselect.min.js 官网地址(左右移动多选框插件)

官方网站入口

weixin_41979303的博客 825

bootstrap左右多选多multselect插件

以bootstrap为基础的multselect插件,左右多选多,配置简单美观,适用于为用户添加多个角色这样的需求

bootstrap multiselect-maste 左右选择、多选 样例包

bootstrap multiselect-maste插件 jquery 左右选择、多选等官方样例下载

下拉多选框bootstrap-multiselect教程

Donald_Draper的专栏 894

基于图像分割的LIDC-IDRI 数据集预处理之数据下载篇

近期接触到了一个关于图像分割实验项目,关于数据预处理部分在此予以记录,和大家分享。

qq_67696694的博客 1904

基于bootstrap的jQuery左右移动多选框插件 multiselect

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> 用户项目管理 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootst

沈荣荣的博客 1万+

BurpSuite实战:5分钟搞定DVWA的CSRF漏洞测试(附详细截图)

本文详细介绍了如何使用BurpSuite在DVWA靶场中进行CSRF漏洞测试,包括环境配置、攻击原理剖析、分步攻击演示及企业级防御方案。通过实战案例,帮助读者深入理解CSRF漏洞的危害与防护措施,提升Web应用安全防护能力。

weixin_30879169的博客 494

从工艺文件到寄生分析:手把手教你用华大九天RCExplorer做版图预检(附ITF文件解析)

本文详细介绍了华大九天RCExplorer工具在模拟IC和版图设计中的应用,从工艺文件解析到寄生参数提取的全流程。通过ITF文件的深度解析和实战案例,帮助工程师掌握金属层、介质层及通孔参数的关键影响,提升设计效率与准确性。文章还提供了与StarRC工作流集成的实用技巧,是国产EDA工具应用的权威指南。

weixin_42522552的博客 407

选择框分组 bootstrap-multiselect

分组并进行选项的禁用和启用1,使用的插件2,多选框3,分组选择 1,使用的插件 bootstrap-multiselect.css bootstrap-multiselect.js 下载链接 2,多选框 代码如下: <!-- 引入js和css文件 --> <link rel="stylesheet" href="${ctx}/static/bootstrap/dist/css/bootstrap-multiselect.css"> <script src="${ctx}/s

qq_41115103的博客 1042

从萤石云到GB28181:海康4G摄像机接入第三方平台的曲折之路

本文深入探讨了海康4G摄像机接入第三方平台时遇到的协议冲突问题,特别是GB28181与萤石云服务的互斥性。通过技术分析揭示了4G模块的定向流量限制和协议栈资源竞争等核心问题,并提供了有线接入测试和萤石云API二次开发等解决方案。最后总结了设备选型的关键参数和协议兼容性检查清单,为安防监控系统集成提供实用指导。

mango的博客 994

基于Bootstrap的下拉框多选 Bootstrap Multiselect 插件使用

基于Bootstrap的下拉框多选插件 Bootstrap Multiselect 的使用方法1、首先去下载代码:https://github.com/davidstutz/bootstrap-multiselect2、页面中引入相关的JS和CSS&lt;link rel="stylesheet" href="/css/bootstrap.css" /&gt; &lt;link rel="styl...

安树的博客 3898

Mac和VScode配置fortran

macOS系统 vscode fortran gfortran 终端

weixin_43047707的博客 2410

几款常见存储系统的对比分析

如何对比选择存储系统?本文给你答案!本文将详细对比NetApp、Lsilon、Vast Data、DDN lustre和WekaFS的五个存储系统的简单性、速度、规模及标准。

hongcloudtech的博客 1679

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍

Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选。它应用的主要步骤如下: 一,引入需要的相关js和css文件 既然是Bootstrap插件,又是基于jQuery的,很明显主要就导入这两个类型的文件 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/c...

那些年的代码 3864

WSOLA原理及matlab仿真

WSOLA原理 对于 OLA 算法来说,常常无法保持原信号中的周期性结构,在帧裁剪的过程中,不能保证每一个帧都能覆盖完整周期并保证其相位对齐,会产生相位跳跃失真。 为保证**基频不变**,就要使用 WSOLA 算法。 WSOLA 并不直接在 Ha 处找一帧进行直接拼接,而是在一个区间内寻找与理想帧最接近的一帧进行叠加。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8a234f4fde104fc69a9f3ddb7bcf3014.png?x-oss-process=ima

ManiacLook的博客 3215

【亲测免费】 Bootstrap Multiselect

是一个基于 jQuery 和 Bootstrap 的插件,它提供了一种更直观的方式来处理多选下拉列表。 ## 项目简介 Bootstrap Multiselect 提供了一个简单的方法来将传统的 HTML 多选下拉框转换为具有多种功能的下拉按钮。该插件支持各种选项,如分组、搜索、过滤、拖放等,可以帮助用户更加方便地管理和选择数据。 ## 功能特性 - 可以通过简单的配置实现多选下拉框的美化...

gitblog_00083的博客 686

语言模型推理能力与计算表达力深度解析

语言模型的推理能力本质上是一种知识迁移与泛化应用的过程,其核心在于Transformer架构中的自注意力机制和前馈网络的协同作用。计算表达力作为衡量模型能力的关键指标,涉及函数逼近、组合泛化和上下文理解等多个维度。随着模型规模的扩大,涌现能力现象揭示了参数规模与推理能力之间的非线性关系。在实际应用中,通过提示工程和微调策略可以有效激活和优化模型的推理表现。当前研究正探索模块化架构和世界模型整合等方向,以突破长程推理和因果关系建模等前沿挑战。本文深入探讨了语言模型推理泛化的技术原理与实践方法,为理解计算表达力

weixin_42521032的博客 343

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

bootstrap-multiselect用法

今天项目中有一个需求,要用到一个可选的下拉列表框,立刻想到了bootstrap-multiselect, 查看了用法,网上虽然有很多,但是也摸索了一段时间。效果如下 1.引入文件 首先要引入相关的css文件和js文件 ,这两个文件可以从这个地方下载 https://github.com/davidstutz/bootstrap-multiselect <link...

游响云停专栏 3007

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

bootstrap multiselect插件级联选择框操作 内容从json文件获取

在开发中经常用到bootstrap插件 这几天发现了一个multiselect插件 选择框插件 很好用 整理一下Demo 供大家参考 在项目中用到选择框一般涉及到级联选择操作 数据是从json文件获取或者从数据库读取出数据 首先 使用这个插件需要导入一系列依赖的js文件和css文件 这个可以从官方demo获取 然后准备json数据 先读取本地json 做一个省 县 市 的筛选 jso

youseenoonehere的博客 3666

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

插件介绍:Bootstrap 下拉多选框插件Bootstrap Multiselect

引入文件:<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <script type="text/javascript" src="js/bootstrap

内沐的博客 7763

bootstrap-multiselect.js如何动态更新select里的数据

在使用jQuery的bootstrap-multiselect插件时可能会遇到一个问题 就是想要动态的去更新select里的数据 比如我们要使一个id=select的选择框实现多选 那么先用ajax获得新数据后清空select再一个个拼成option $("#select").html(""); for (var i = 0; i < json.length; i++) { $(

Rip32ss的博客 1万+

Bootstrap Multiselect 下拉框多选插件的回显问题

插件官网:http://davidstutz.de/bootstrap-multiselect/ “修改” 等需要回显的操作,按如下逻辑实现回显(自动勾上已选值): 实测有效方式有2种: 第1种: 先给SELECT标签填入OPTION,同时在 需要勾选的OPTION 中添加属性 selected="selected" ; 接着启用插件:$('#select的ID').multise...

分享·收获 2083
上一篇: Python 获取json数据中的key和value
下一篇: Tomcat 配置https请求
Java程序之猿
博客等级 码龄9年 2599粉丝 140原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值