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">&gt;&gt;</a></p><p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</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">&lt;&lt;</a></p><p><a href="#" id="selectAllToLeft">&lt;&lt;&lt;</a></p></span></td></tr><tr><td colspan="2"><input type='submit' value="修改" /></td></tr></table></body></html>

转载于:https://www.cnblogs.com/xuyiqing/p/8383835.html

jQuery应用实例4：下拉列表相关推荐

html动态下拉列表,jQuery实现动态显示select下拉列表数据的方法
本文实例讲述了jQuery实现动态显示select下拉列表数据的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery动态显示表单 //数 ...
jQuery Ajax 实例 ($.ajax、$.post、$.get)
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
java中jquery怎么学,jQuery动画+实例
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...
jQuery Ajax 实例全解析(转)
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
jQuery Ajax 实例
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
html 隐藏hide,jQuery UI 实例
jQuery UI 实例 - 隐藏(Hide) 使用自定义效果来隐藏匹配的元素. 如需了解更多有关 .hide() 方法的细节,请查看 API 文档 .hide(). .hide() 演示点击按钮预 ...
jQuery开发经验实例笔记
jQuery开发经验实例笔记 jQuery获取文件选择输入框的扩展名 var file=$("input[name='file']").val() var filename=fil ...
jQuery动画+实例
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...
jQuery Ajax 实例全解析（转载）
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
使用Jquery，完成连动下拉列表
使用Jquery,完成连动下拉列表代码展示: <!doctype html> <html lang="en"><head><title& ...

jQuery应用实例4：下拉列表

jQuery应用实例4：下拉列表相关推荐

最新文章

热门文章