html 左右选择框,jquery实现下拉框左右选择功能

1、说明

本文demo实现下拉框左右选择

2、代码

.centent

{

width: 260px;

}

.cententl

{

float: left;

}

.btnAdd

{

float: left;

padding:30px 5px;

}

$(function () {

//移到右边

$('#btnAdd').click(function () {

//获取选中的选项，删除自己并追加给对方

$('#select1 option:selected').appendTo('#select2');

});

//移到左边

$('#btnDel').click(function () {

//获取选中的选项，删除自己并追加给对方

$('#select2 option:selected').appendTo('#select1');

});

//全部移到右边

$('#btnAdds').click(function () {

//获取全部的选项,删除自己并追加给对方

$('#select1 option').appendTo('#select2');

});

//全部移到左边

$('#btnDels').click(function () {

//获取全部的选项,删除自己并追加给对方

$('#select2 option').appendTo('#select1');

});

//双击选项

$('#select1').dblclick(function () {

//获取双击的选项,删除自己并追加给对方

$("option:selected", this).appendTo('#select2');

});

//双击选项

$('#select2').dblclick(function () {

//获取双击的选项,删除自己并追加给对方

$("option:selected", this).appendTo('#select1');

});

课程1

课程2

课程3

课程4

课程5

课程6

课程7

课程8

图(1)

图(2)

图(3)

3、Demo

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

html 左右选择框,jquery实现下拉框左右选择功能相关推荐

php 下拉树多项选择框,jQuery树形下拉框插件multipleTree升级
插件描述:tree是基于jqueryztree开发的树形下拉选择框插件,支持ie8+谷歌,火狐,360等浏览器(multipleTree升级版) 更新时间:2020-09-26 00:48:20 更新 ...
jquery对下拉框的操作
<script type="text/javascript"></script> jQuery对下拉框的操作 /获取第一个option的值 $('#test ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...
jquery复选框选中及下拉框选中指定项(删除项)
(1)复选框选中及下拉框选中指定项(删除项) <%@ taglib prefix="form" uri="http://www.springframework.or ...
html下拉框原理,html下拉框获取value属性
java如何取到html中的下拉框中的value呢? JComboBox有一个getSelectedItem()的方法得到选择的值和一个getSelectedIndex()得到选择值的索引.getSe ...
html 下拉框只读属性,Select下拉框的只读属性设置
今天在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: 情况:根据取得的值去选定select下拉框的选项. 引一个jquery.CSS:body{m ...
Easyexcel生成excel并通过自定义注解实现下拉框以及动态下拉框(将数据库中的数据显示在excel下拉框中)
首先需要定义excel实体类 @Data @ColumnWidth(22) @HeadRowHeight(30) public class ExcelProductDTO {//动态下拉框,可以查询数 ...
html下拉框怎么默认选中,select获取下拉框的值下拉框默认选中方法
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值例如: 数字1 数字2 $("#numbers option:selected").val( ...

html 左右选择框,jquery实现下拉框左右选择功能

html 左右选择框,jquery实现下拉框左右选择功能相关推荐

最新文章

热门文章