分享利用JS实现两个select标签中内容更换的小实例

最新推荐文章于 2022-06-21 20:31:23 发布

陌隋

最新推荐文章于 2022-06-21 20:31:23 发布

阅读量1.6k

点赞数

分类专栏：学习心得文章标签： stylesheet string path html function import

本文链接：https://blog.csdn.net/lki_suidongdong/article/details/7918233

版权

学习心得专栏收录该内容

30 篇文章 0 订阅

订阅专栏

利用两个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" οndblclick="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" οndblclick="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>

陌隋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享利用JS实现两个select标签中内容更换的小实例

利用两个select标签，当双击一个标签的选项后，该选项会添加到另一个选项中，并且当前选项移除，效果下图：代码如下：<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServer
复制链接

扫一扫