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

<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>
赞 (0)

相关推荐

  • Jquery对select的增、删、改、查操作

    逃不开传统的四种操作:增.删.改.查. <四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看.日历天数变化代码为原创.> [增]: 复制代码 代码如下: $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) $("#select_id").prepend("&l

  • jquery使用ul模拟select实现表单美化的方法

    jquery使用ul模拟select实现表单美化的方法

    本文实例讲述了jquery使用ul模拟select实现表单美化的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap">         <div class="nice-select" name="nice-select&

  • jquery操作select方法汇总

    本文实例汇总了jquery操作select的方法.分享给大家供大家参考.具体如下: jQuery获取Select选择的Text和Value:      语法解释: 复制代码 代码如下: $("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text();

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li

  • jQuery实现的仿select功能代码

    jQuery实现的仿select功能代码

    本文实例讲述了jQuery实现的仿select功能.分享给大家供大家参考.具体如下: 这里重新再次与大家分享jQuery仿select功能,这个实现起来倒不复杂,就当研究一下jQuey插件的用法啦,还望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fselect-cha-method-codes/ 具体代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri

  • jquery实现动态操作select选中

    今天因为有项目需要动态操作select选中 习惯在百度上搜了一下 ,结果还是挺多的.试了其中一个 发现不能使用.打开第2,3 个发现都是一样的然后自己稍微研究了一下 复制代码 代码如下: //初始化select,第一个选中             $('#stoStoreCategoryID').get(0).selectedIndex=0;             $("#stoStoreCategoryID option").each(function(i,n){         

  • 基于jquery实现select选择框内容左右移动添加删除代码分享

    基于jquery实现select选择框内容左右移动添加删除代码分享

    本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图:                                  ----------------------查看效果----------------------- 小提示:浏览

  • jquery实现select下拉框美化特效代码分享

    jquery实现select下拉框美化特效代码分享

    这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

随机推荐