jQuery应用实例4:下拉列表
应用场景:左侧是已有商品,右侧是未有商品,选择其中的内容点击箭头即可互换:
点击大箭头则全部内容去另一边,或者双击已有商品的选项也会加入右边:
代码实现:
<!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"));
}); $("#selectOneToLeft").click(function() {
$("#right option:selected").appendTo($("#left"));
}); $("#selectAllToLeft").click(function() {
$("#right option").appendTo($("#left"));
}); $("#right option").dblclick(function() {
$("#right option:selected").appendTo($("#left"));
});
});
</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="#" id="selectOneToLeft"><<</a></p>
<p><a href="#" id="selectAllToLeft"><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改" />
</td>
</tr>
</table>
</body> </html>
jQuery应用实例4:下拉列表的更多相关文章
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery AJAX实例
<html><head><title>jQuery Ajax 实例演示</title></head><script language= ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】
本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)转
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...
- jQuery 验证实例(shopnc二次开发)
shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- JQuery+Ajax实战三级下拉列表联动(八)
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
随机推荐
- 使用swiper插件,隐藏swiper后再显示,不会触发自动播放的解决办法
问题: 项目中有一个需求,当点击P1时,两个页面进行轮播.当点击P2时,页面不轮播. 设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发. 解决: 在轮播器配置里,配置observe ...
- (转)SQL SERVER 生成建表脚本
https://www.cnblogs.com/champaign/p/3492510.html /****** Object: StoredProcedure [dbo].[GET_TableScr ...
- 安装SourceTree工具,无需注册就可以正常使用SourceTree
1. 下载SourceTree安装包 2. 双击安装包进行安装,默认会直接安装在系统盘,此时桌面就会SourceTree的快捷键 3. 双击打开桌面的SourceTree,就会提示让你安装授权,那么接 ...
- 项目(二)DNS解析——配置域名服务器
NDS服务器常见种类有:缓存域名服务器.主域名服务器.从域名服务器.DNS服务器查询方法有两种:递归查询和迭代查询.其中,递归查询是DNS服务器在本地通过缓存.本地映射.记录本得到结果,而迭代查询是D ...
- Binary Space Partitioning
[Binary Space Partitioning] BSP was discovered by John Carmack used BSP trees in Doom and Quake. Alt ...
- 20175126《Java程序设计》第一周学习总结
# 学号 20175126 <Java程序设计>第一周学习总结 ## 教材学习内容总结 - 1.安装了WINDOS系统的JDK,并学会了利用JDK编写并编译JAVA程序的基本方法. ...
- python note 01 计算机基础与变量
1.计算机基础. 2.python历史. 宏观上:python2 与 python3 区别: python2 源码不标准,混乱,重复代码太多, python3 统一 标准,去除重复代码. 3.pyth ...
- [leetcode]84. Largest Rectangle in Histogram直方图中的最大矩形
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
- [leetcode]26. Remove Duplicates from Sorted Array有序数组去重(单个元素只出现一次)
Given a sorted array nums, remove the duplicates in-place such that each element appear only once an ...
- Vim中YouCompleteMe插件安装
背景 YouCompleteMe需要使用GCC进行编译,然而Centos 6.7默认的GCC版本太低,所以需要使用devtools-2,用来安装多个版本GCC手动编译安装GCC的坑简直不要太多(类似于 ...