• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery 实现两Select 标签项互调示例代码

jquery 实现两Select 标签项互调示例代码

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了Select,标签,互调等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>


<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("#toRight").click(function(){
$("#selectLeft option:selected").each(function(){
$("#selectRight").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");
$(this).remove();
});
});

$("#toLeft").click(function(){
$("#selectRight option:selected").each(function(){
$("#selectLeft").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");//这个方法是默认在后面添加
//$("#selectLeft option:first").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在select前面加内容
//$("#selectLeft option[value=3]").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在selectt指定某一行加内容
$(this).remove();
});
});

});
//-->
</SCRIPT>


<BODY>
<table>
<tr>
<td>
<select size='10' multiple id="selectLeft" style="width:200px">
<option value="0">Jquery API</option>
<option value="1">JavaScript高级程序设计</option>
<option value="2">锋利的jQuery</option>
<option value="3">JavaScript 设计模式</option>
<option value="4">JavaScript+DOM高级程序设计</option>
<option value="5">PHP高级程序设计</option>
<option value="6">面向对象程序设计</option>
</select>
</td>
<td>
<input type="button" value=" >> " id="toRight" /><br /><br />
<input type="button" value=" << " id="toLeft" />
</td>
<td>
<select size='10' multiple id="selectRight" style="width:200px">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jquery Ajax实现Select动态添加数据
  • jQuery插件imgAreaSelect基础讲解
  • jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
  • jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
  • jQuery Validate 无法验证 chosen-select元素的解决方法
  • jQuery实现select下拉框获取当前选中文本、值、索引
  • jQuery Tree Multiselect使用详解
  • jQuery实现Select下拉列表进行状态选择功能
  • jQuery动态产生select option下拉列表
  • JavaScript实现向select下拉框中添加和删除元素的方法

相关文章

  • 2017-08-16jQuery如何解决IE输入框不能输入的问题
  • 2017-08-16js/jquery判断浏览器类型的方法小结
  • 2017-08-16jQuery 处理网页内容的实现代码
  • 2017-08-16JQuery Easyui Tree的oncheck事件实现代码
  • 2017-08-16textarea中的手动换行处理的jquery代码
  • 2017-08-16jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • 2017-08-16jquery链式操作的正确使用方法
  • 2017-08-16jquery下拉select控件操作方法分享(jquery操作select)
  • 2017-08-16jQuery焦点图轮播特效代码分享(3款)
  • 2017-08-16jQuery zclip插件实现跨浏览器复制功能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于jquery插件实现拖拽删除图片功能
    • jQuery 行背景颜色的交替显示(隔行变色)实现代码
    • jquery把int类型转换成字符串类型的方法
    • 当鼠标移动时出现特效的JQuery代码
    • jquery操作 iframe的方法
    • jQuery实现的调整表格行tr上下顺序
    • jQuery基于xml格式数据实现模糊查询及分页功能的方法
    • jQuery easyUI datagrid 增加求和统计行的实现代码
    • jQuery中animate的几种用法与注意事项
    • JQuery 图片的展开和伸缩实例讲解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有