分享利用JS实现两个select标签中内容更换的小实例
2012-08-29 00:39
771 查看
利用两个select标签,当双击一个标签的选项后,该选项会添加到另一个选项中,并且当前选项移除,效果下图:
代码如下:
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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"> --> </head> <body> <select multiple="multiple" id="s1" style="width: 200px;height: 200px" ondblclick="move(this,getElementById('s2'))"> <option value="a">李逍遥</option> <option value="b">赵灵儿</option> <option value="c">林月如</option> <option value="d">刘晋元</option> <option value="e">唐钰小宝</option> <option value="f">阿奴</option> </select> <select multiple=" multiple" id="s2" style="width: 200px;height: 200px" ondblclick="move(this,getElementById('s1')> </select> </body> <script type="text/javascript"> function move(s1,s2){ var ops1=s1.options; var ops2=s2.options; var index=s1.selectedIndex; if(index<0){ return; } var op=new Option(); op.value=ops1[index].value; op.text=ops1[index].text; ops2.add(op); ops1.remove(index); } </script> </html>
相关文章推荐
- 【js实例】js实现点击标题标签切换显示对应内容
- js + css实现标签内容切换功能(实例讲解)
- 在js中利用ajax技术实现不刷新更新内容
- js实现弹窗插件功能实例代码分享
- 利用<div>层 和<img>标签,实现一个图片两个动画效果
- JS 如何实现两个div的内容调换
- JS实现两个大数(整数)相乘 实例代码
- jquery实现select选择框内容左右移动代码分享
- js利用appendChild对<li>标签进行排序的实现方法
- 笔记:JS利用正则表达式实现去除Html标签方法
- JQuery 获取多个select标签option的text内容(实例)
- 用js实现两个select下拉框之间的元素互相移动
- Linux初学,利用共享内存,有名管道,select实现两个用户之间的自由对话。
- [HTML/JS]利用JQuery的load函数动态加载其它页面的内容的实现代码代替Ifram
- 利用JS实现JSF页面h:selectOneMenu的联动
- 利用C语言重定向函数freopen实现交换两个文本文件内容
- JS中利用swiper实现3d翻转幻灯片实例代码
- 利用js往标签内加内容