Jquery下拉框左右选择
1、说明
本文demo实现下拉框左右选择，本文地址：http://www.cnblogs.com/lengzhan/p/6423023.html
2、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.centent
{
width: 260px;
}
.cententl
{
float: left;
} .btnAdd
{
float: left;
padding:30px 5px;
}
</style>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(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');
});
});
</script>
</head>
<body>
<div class="centent">
<div class="cententl">
<select multiple="multiple" id="select1" style="width: 100px; height: 160px;">
<option value="1">课程1</option>
<option value="2">课程2</option>
<option value="3">课程3</option>
<option value="4">课程4</option>
<option value="5">课程5</option>
<option value="6">课程6</option>
<option value="7">课程7</option>
<option value="8">课程8</option>
</select>
</div>
<div class="btnAdd">
<input type="button" id="btnAdd" value=" > " /><br />
<input type="button" id="btnDel" value=" < " /><br />
<input type="button" id="btnAdds" value=">>" /><br />
<input type="button" id="btnDels" value="<<" />
</div>
<div>
<select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
</select>
</div>
</div>
</body>
</html>
3、Demo
Jquery下拉框左右选择的更多相关文章
- jquery 下拉框左右选择
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
- selenium 显示等待wait.until 常用封装 及下拉框的选择操作等
from selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait a ...
- 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- Andrew Ng的机器学习视频文件夹（from coursera, 2014）
第一周: 简单介绍机器学习,有监督学习.无监督学习. 1-1,1-2,1-3,1-4 第二周: 2-1:回归问题举例 2-2:介绍cost function定义. 2-3:在回归函数是一个经过原点的直 ...
- android 自己定义控件
Android自己定义View实现非常easy 继承View,重写构造函数.onDraw.(onMeasure)等函数. 假设自己定义的View须要有自己定义的属性.须要在values下建立attrs ...
- Java经常使用类及其经常用法
1.ArrayList java.util.ArrayList<E> add(E e) //插入尾部 add(int index, E element) remove(int index) ...
- JAVA 保留两位小数
package com.oracle.pojo; import java.math.BigDecimal; import java.text.DecimalFormat; import java.te ...
- 【转载】FAT12文件系统之引导扇区结构
FAT12文件系统之引导扇区结构 文件系统即文件管理系统,是操作系统的重要组成部分之一,如果需要开发底层磁盘驱动或编写自己的操作系统,就必须详细了解文件系统. FAT12是Microsoft公司DOS ...
- Linux input子系统实例分析（二）
紧接着上一节的实例我们来分析调用的input子系统的接口: 1. input_dev,用来标识输入设备 1: struct input_dev { 2: const char *name; //设备名 ...
- Jenkins+appium+testng持续集成
Create maven project in eclipseAdd Appium , Selenium dependancyAdd Test in TestNG testCreate TestNG ...
- JSP与HTML的差别
HTML(Hypertext Markup Language)文本标记语言,它是静态页面,和JavaScript一样解释性语言,为什么说是解释性 语言呢?由于.仅仅要你有一个浏览器那么它就能够正常显示 ...
- MFC上显示摄像头JPEG图片数据的两种方法
其一是借助opencv,其二是利用流对象. 方法一: CvMat *mat; ,,CV_8UC1); ,,CV_8UC1,JPEGBuf); /*初始化矩阵信息头,这里的JPEGBuf就是JPEG图像 ...
- mysql优化-----索引覆盖
一道面试题: 有商品表, 有主键,goods_id, 栏目列 cat_id, 价格price 说:在价格列上已经加了索引,但按价格查询还是很慢,问可能是什么原因,怎么解决? 答:在实际场景中,一个电商 ...