jquery 实现两Select 标签项互调示例代码
2014-09-25 00:00
856 查看
<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>
相关文章推荐
- jquery 实现两Select 标签项互调示例代码
- JQuery 操作select标签实现代码
- jquery实现省市select下拉框的替换(示例代码)
- JQuery 操作select标签实现代码
- jquery实现省市select下拉框的替换(示例代码)
- Jquery操作radio,checkbox,select表单操作实现代码
- 用javascript来实现select标签的美化的代码
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- 【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码
- js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- 在Javascript(js)或Jquery中直接实现超链接跳转代码示例!
- Jquery为a标签的href赋值实现代码
- 基于JQuery的多标签实现代码
- DIY jquery plugin - tabs标签切换实现代码
- DIY jquery plugin - tabs标签切换实现代码
- 使用jquery动态生成的标签,需要在代码当中绑定才可以实现事件的监听
- 利用jquery的imgAreaSelect插件实现图片裁剪示例