jQuery下拉框的简单应用


Posted in Javascript onJune 24, 2016

先看看效果图:

jQuery下拉框的简单应用

大家肯定都见过类似效果的网页,怎么实现的呢,代码很简单:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
  float:left;
  text-align: center;
  margin: 10px;
}
span { 
 display:block; 
 margin:2px 2px;
 padding:4px 10px; 
 background:#898989;
 cursor:pointer;
 font-size:12px;
 color:white;
}
</style>
<!--  引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //移到右边
 $('#add').click(function() {
 //获取选中的选项,删除并追加给对方
 $('#select1 option:selected').appendTo('#select2');
 });
 //移到左边
 $('#remove').click(function() {
 $('#select2 option:selected').appendTo('#select1');
 });
 //全部移到右边
 $('#add_all').click(function() {
 //获取全部的选项,删除并追加给对方
 $('#select1 option').appendTo('#select2');
 });
 //全部移到左边
 $('#remove_all').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">
 <select multiple="multiple" id="select1" style="width:100px;height:160px;">
  <option value="1">曹操</option>
  <option value="2">曹昂</option>
  <option value="3">曹丕</option>
  <option value="4">曹彰</option>
  <option value="5">曹植</option>
  <option value="6">曹熊</option>
  <option value="7">曹仁</option>
  <option value="8">曹洪</option>
  <option value="9">曹休</option>
  <option value="10">曹真</option>
  <option value="11">曹爽</option>
 </select>
 <div>
  <span id="add" >选中添加到右边>></span>
  <span id="add_all" >全部添加到右边>></span>
 </div>
 </div>
 <div class="centent">
 <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
  <option value="12">曹芳</option>
 </select>
 <div>
  <span id="remove"><<选中删除到左边</span>
  <span id="remove_all"><<全部删除到左边</span>
 </div>
 </div>
</body>
</html>

代码实现的功能:
1)、将选中的选项添加给对方

2)、将全部选项添加给对方

3)、双击某个选项将其添加给对方

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
javascript实现表单验证
Jan 29 Javascript
jQuery操作cookie
Aug 08 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
浅谈json取值(对象和数组)
Jun 24 #Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 #Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 #Javascript
JS控制文本域只读或可写属性的方法
Jun 24 #Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 #Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 #Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 #Javascript
You might like
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JavaScript模块详解
2017/12/18 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
生物制药自我鉴定
2014/01/25 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python