实现如图选择的功能,可以用基于bootstrap的样式,结合jquery事件:

<div class="row">
<div class="col-xs-3">
<select name="from" id="select1" class="form-control" size="10">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
</select>
</div> <div class="col-xs-2">
<button type="button" id="rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
</div> <div class="col-xs-3">
<select name="to" id="select2" class="form-control" size="10"></select>
</div>
</div>
function select_init() {
//将左边所有选项添加到右边
$('#rightAll').click(function() {
$('#select1 option').appendTo('#select2');
})
//将左边选中的选项添加到右边
$('#rightSelected').click(function() {
$('#select1 option:selected').appendTo('#select2');
}) //将右边所有选项添加到左边
$('#leftAll').click(function() {
console.log("点击右边")
$('#select2 option').appendTo('#select1');
})
//将左边选中的选项添加到右边
$('#leftSelected').click(function() {
$('#select2 option:selected').appendTo('#select1');
}) //双击左边选项直接添加到右边的效果
$('#select1').dblclick(function(event) {
$("option:selected",this).appendTo('#select2')
});
//双击右边选项直接添加到左边的效果
$('#select2').dblclick(function(event) {
$("option:selected",this).appendTo('#select1')
});
}

这样就可以简单实现想要的效果啦!

基于jquery和bootstrap的下拉框左右选择功能的更多相关文章

  1. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  2. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  3. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  4. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  5. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  6. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  7. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  8. 基于jquery封装的颜色下拉选择框

    应同事要求,花了半个小时,写了一个简单的选择颜色的下拉框控件,可以控制输入框指示结果颜色 也贴出来,说不定哪天有用 if (typeof jQuery === 'undefined') { throw ...

  9. 自制jquery可编辑的下拉框

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...

随机推荐

  1. php min()函数 语法

    php min()函数 语法 作用:从所有参数中找到最小数 语法:min(X,Y,Z) 或者min(array(X,Y,Z)) 参数:min函数中参数至少一个,可以多个参数,也可以是数组. 说明:如果 ...

  2. 4412 make menuconfig和make

    一.Menuconfig的操作 • Linux编译器通过.config文件确认哪些代码编译进内核,哪些被裁减掉• menuconfig是生成.config的一个工具• 在Linux发展过程中,配置内核 ...

  3. Python读取文件时出现UnicodeDecodeError 'gbk' codec can't decode byte 0x80 in position x

    Python在读取文件时 with open('article.txt') as f: # 打开新的文本 text_new = f.read() # 读取文本数据出现错误: UnicodeDecode ...

  4. jdk8的stream流式计算的操作

    jdk8之后增加了流式计算,现在根据学习了流式计算,并把过程记录下来: Person.java的bean package com.zhang.collectordemo; /** * @program ...

  5. 左手Mongodb右手Redis

    第二章,了解Mongodb保存数据 Mongodb对于每次插入的数据没有要求,字段可以随便变动,字段类型可以随意变动. Mongodb可以并发插入上万条文档,这是传统关系型数据库不能望其项背的. 1. ...

  6. 18. Jmeter-取样器二

    jmeter-sampler介绍与使用 JMS Point-to-Point JMS Publisher JMS Subscriber JSR223 Sampler JUnit Request Jav ...

  7. MySQL分表备份

    #!/bin/bash DUMP=/usr/bin/mysqldump MYSQL=/usr/bin/mysql IPADDR=127.0.0.1 PORT=3306 USER=abc PASSWD= ...

  8. 插件化框架解读之android系统服务实现原理(五)

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 一.系统服务提供方式 1.我们平时最常见的系统服务使用方式 Wi ...

  9. vue证明题一,vue全家桶的构成

    简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...

  10. Vue内敛模板

    在学习<Vue实战>一书时,学习到组件高级应用-内联模板这一小节时,照着书上的例子敲了一遍,发现未达到预期,切报错. 书上源代码如下: <!DOCTYPE html> < ...