Jquery实现下拉列表左右选择
知识点:
jquery 的 click dbclick 事件 appendTo方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.选中单击去右边
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
//2.单击全部去右边
$("#selectAllToRight").click(function(){
$("#left option").appendTo("#right");
});
//3.选中双击去右边
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
})
});
</script> </head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分类名称
</td>
<td>
<input type="text" name="cname" value="手机数码"/>
</td>
</tr>
<tr>
<td>
分类描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
</td>
</tr>
<tr>
<td>
分类商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋体">已有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<p><a href="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改"/>
</td>
</tr>
</table>
</body>
</html>
Jquery实现下拉列表左右选择的更多相关文章
- jQuery根据下拉列表的选择进行不同的操作
需求:选择了某个下拉列表选项,进行不同的操作 代码部分: <!doctype html> <html> <head> <meta charset=" ...
- jQuery学习(七)——使用JQ完成下拉列表左右选择
1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...
- jquery获取下拉列表的值和显示内容的方法
页面的下拉列表: 选择时间段: <select name="timespan" id="timespan" class="Wdate" ...
- js实现-下拉列表左右选择
下拉列表左右选择 * 下拉选择框 <select> <option>111</opt ...
- jQuery选择器的优化选择
jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]"); ...
- JavaScript案例五:下拉列表左右选择
用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...
- JQuery基础教程:选择元素(中)
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
- jQuery 在Table中选择input之类的东西注意事项
jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Python数据类型一
一.整型 在Python内部对整数的处理分为普通整数和长整数,普通整数长度为机器位长,通常都是32位,超过这个范围的整数就自动当长整数处理,而长整数的范围几乎完全没限制Python可以处理任意大小的整 ...
- 实际遭遇GC回收造成的Web服务器CPU跑高
今天下午有段时间访问园子感觉不如以前那么快的流畅,上Web服务器一看,果然,负载均衡中的1台云服务器CPU跑高. 上图中红色曲线表示的是CPU占用率.正常情况下,CPU占用率一般在40%以下. 这台云 ...
- USACO Section1.3 Wormholes 解题报告
wormhole解题报告 —— icedream61 博客园(转载请注明出处)------------------------------------------------------------- ...
- 《算法》C++代码 Dijkstra
单源最短路,复杂度是O(N²),堆优化的是O(NlogN).基本思想是贪心,每次都加入一个当前最近的点,可以证明每次当时最近的点就是当前最短的路径.因此,所有点都加入之后,起点到所有点的最短路径就都求 ...
- node.js和npm的安装
1.进入node.js官方网站,下载和系统对应的版本,我下载的是这个最新版本:node-v8.2.1-x64.msi https://nodejs.org/en/download/ 2.windows ...
- obj = object(),所创建的obj实例到底是个啥?
In[1]: dir(obj) Out[1]:['__class__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__', '_ ...
- python与execl的读写
[code=python] #复制execl中的部分数据到另一份execl中的相同位置 import xlrd import xlwt import xlutils.copy path1=" ...
- 孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4
孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十一天. 今天继续学习mongoDB的简单操作 ...
- JAVA并发-线程协作
这段时间有点忙,技术博客更新的比较少,今天更新一下相关并发的常用线程协作的类吧. ExecutorService 线程池,用于创造和复用线程,他有几种模式. 我举一个自定义线程池数量的例子如下 Exe ...
- 【Linux】- 获取root权限命令
1:Redhat系统或者Fedora或者CentOs的Linux发行版,那么在Linux终端输入命令回车: su - root 这样就可以切换到root权限了 2:Ubuntu系统,在Linux终端输 ...