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

2024-04-24 19:12:27

1、说明

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

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>

图（1）

图（2）

图（3）

3、Demo

点击下载

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

jQuery实现下拉框左右移动（全部移动，已选移动）

用到的方法为:appendTo() 格式:$(content).appendTo(selector) appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容. click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数. 看一下具体实现的代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script
jQuery实现下拉框左右选择的简单实例

就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边. html部分: 复制代码代码如下: <body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <optio
jQuery实现下拉框选择图片功能实例

本文实例讲述了jQuery实现下拉框选择图片功能.分享给大家供大家参考.具体如下: 让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>支持图片选择的jQuery
jquery取消选择select下拉框示例代码

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()"> <option value="">全部</option>
基于jQuery的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1
jquery仿QQ登录账号选择下拉框效果

QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示
基于jquery实现的可以编辑选择的下拉框的代码

效果图: 代码如下: 复制代码代码如下: <!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> <title>
jquery实现下拉框左右选择功能

1.说明本文demo实现下拉框左右选择 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
jQuery实现下拉框多选 jquery-multiselect 的实例代码

先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
基于jQuery实现下拉框

项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码. jQuery代码: 复制代码代码如下: $(function(){ $('#add').click(function(){ var $options = $('#select1 option:selected'); $options.a
jQuery Select下拉框操作小结(推荐)

jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_
jquery实现下拉框功能效果【实例代码】

说不清楚,直接上图 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; paddin
jQuery+jsp下拉框联动获取本地数据的方法(附源码)

本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法.分享给大家供大家参考,具体如下: JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量.(点击此处下载源代码) 下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包 commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.3.jar commons-logging-1.0.4.jar ez
jQuery模拟下拉框选择对应菜单的内容

先给大家展示下效果图: 下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,a,p{margin
jQuery 自定义下拉框(DropDown)附源码下载

先给大家展示下效果图,喜欢的朋友可以下载源码哦效果演示源码下载 <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>手册网</span> <ul class="
jQuery设置下拉框显示与隐藏效果的方法分析

本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素. $("select").hide(); // 隐藏下拉框 $("select").show(); // 显示下拉框 $("select").togg

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

相关推荐

随机推荐