jsp中两个框中内容互换可以添加也可以移除

在项目中需要实现如下的效果内容。如图：

具体实现的源码如下：

两个框的页面源码：

已选角色：<br /> <select multiple="multiple" name="roleIds" size="10" id="roleIds"> 

<option value="1">
主任
</option>
<option value="2">
医师
</option><option value="3">
护士
</option><option value="4">
前台
</option><option value="5">
内勤
</option>
</select> 

<input type="button" value="<<-添加" 

onclick="moveOptions(document.getElementById('roleList'),document.getElementById('roleIds'));" /> 

<input type="button" value="移除->>"
class="btn1"
onclick="moveOptions(document.getElementById('roleIds'),document.getElementById('roleList'));" />
<br/>
备选角色：<br /> <select multiple="multiple" size="10"
id="roleList"> 

<option value="6">
工程师1
</option><option value="7">
工程师2
</option><option value="8">
工程师3
</option><option value="9">
工程师4
</option><option value="10">
工程师5
</option><option value="11">
工程师6
</option> 

</select>

实现的js代码：

function moveOptions(oSource, oTarget) {
while (oSource.selectedIndex > -1) {
var opt = oSource.options[oSource.selectedIndex];
oSource.removeChild(opt);
var mark = true;
for(var i = 0; i < oTarget.options.length; i++){
if(opt.value == oTarget.options[i].value){
mark = false;
}
}
if(mark){
var newOpt = document.createElement("OPTION");
oTarget.appendChild(newOpt);
newOpt.value = opt.value;
newOpt.text = opt.text;
newOpt.selected = true;
}
}
}
赞 (0)

相关推荐

  • 高效的jsp分页查询

    Jsp如下:**********************<%@ page language="java" import="java.util.*,java.sql.*" %><%@ page contentType="text/html;charset=gb2312"%><jsp:useBean id="cn" scope="page" class="myConnec

  • jsp操作MySQL实现查询/插入/删除功能示例

    jsp操作MySQL实现查询/插入/删除功能示例

    直接贴代码吧: 首先,index_test.jsp页面的代码如下: 复制代码 代码如下: <%@ page language="java" pageEncoding="utf-8"%> <%@ page contentType="text/html;charset=utf-8"%>  <%     request.setCharacterEncoding("UTF-8");     respons

  • asp+jsp+JavaScript动态实现添加数据行

    asp+jsp+JavaScript动态实现添加数据行

    在应用程序的开发中,有些输入信息是动态的,比如我们要注册一个员工的工作经历,比如下图 如果做成死的,只能填写三个,如果是四个呢?或者更多呢,那不是添加不上去了吗,所以这样固然不好,我们可以用动态添加表格行实现,如下图,添加一行,输入一行信息,这样比较灵活 下面我们就来看看如何在asp和asp.net中结合javascript来实现这种效果: 首先,动态添加表格是要在前台实现的,当然后台也可以,不过可能要用到ajax,很麻烦,所以最好采用javascript来实现,下面来介绍动态添加表格行的两种方

  • JSP简单添加,查询功能代码

    本文实例讲述了JSP简单添加,查询功能.分享给大家供大家参考.具体如下: JSP技术: public class ISOtoGb2312 { public static String convert( String str ) { try { byte<> bytesStr=str.getBytes( "ISO-8859-1" ) ; return new String( bytesStr, "gb2312" ) ; } catch( Exception

  • JSP实现添加功能和分页显示实例分析

    本文实例讲述了JSP实现添加功能和分页显示的方法.分享给大家供大家参考.具体如下: 学习目标: ① 进一步掌握MVC设计模式: ② 掌握添加功能的实现: ③ 掌握分页显示功能的实现. 主要内容: ① 通过用户信息添加功能进一步介绍MVC模式: ② 通过用户信息的分页显示介绍分页显示功能的原理和实现. 1.如何采用MVC模式完成用户添加? 首先考虑与人如何交互:应该有一个输入用户信息的界面,包含用户名和口令,另外需要一反馈的界面. 然后考虑功能如何实现:需要在User类中添加一个方法,完成用户信息

  • JSP使用JDBC完成动态验证及采用MVC完成数据查询的方法

    本文实例讲述了JSP使用JDBC完成动态验证及采用MVC完成数据查询的方法.分享给大家供大家参考.具体如下: 一.目标: ① 掌握JDBC链接数据库的基本过程: ② 掌握使用JDBC进行数据查询. 二.主要内容: ① 在上一次的实例基础上,通过连接数据库完成用户登录功能,介绍JDBC的基本用法: ② 通过显示所有用户信息进一步介绍JDBC的用法和查询结果的处理. 1.JDBC概念 Java Database Connectivity的缩写,用于连接Java应用程序与各种关系数据库的标准接口.对于

  • jsp连接MySQL操作GIS地图数据实现添加point的功能代码

    jsp连接MySQL操作GIS地图数据实现添加point的功能代码

    index_map.jsp中的代码: 复制代码 代码如下: <%@ page language="java" pageEncoding="utf-8"%> <%@ page contentType="text/html;charset=utf-8"%>  <%     request.setCharacterEncoding("UTF-8");     response.setCharacterE

  • jsp中两个框中内容互换可以添加也可以移除

    jsp中两个框中内容互换可以添加也可以移除

    在项目中需要实现如下的效果内容.如图: 具体实现的源码如下: 两个框的页面源码: 已选角色:<br /> <select multiple="multiple" name="roleIds" size="10" id="roleIds"> <option value="1"> 主任 </option> <option value="2"

  • 如何更改 pandas dataframe 中两列的位置

    如何更改 pandas dataframe 中两列的位置: 把其中的某列移到第一列的位置. 原来的 df 是: df = pd.read_csv('I:/Papers/consumer/codeandpaper/TmallData/result01.csv') Net Upper Lower Mid Zsore Answer option More than once a day 0% 0.22% -0.12% 2 65 Once a day 0% 0.32% -0.19% 3 45 Sever

  • 易语言取出两个编辑框中相同内容的代码

    易语言取出两个编辑框中相同内容的代码

    对比两个编辑框内容的代码 .版本 2 .程序集 窗口程序集1 .子程序 _对比按钮_被单击 .局部变量 循环计次1, 整数型 .局部变量 文本1, 文本型, , "0" .局部变量 循环计次2, 整数型 .局部变量 文本2, 文本型, , "0" 对比结果编辑框.内容 ＝ "" 文本1 ＝ 分割文本 (编辑框1.内容, #换行符, ) 文本2 ＝ 分割文本 (编辑框2.内容, #换行符, ) .计次循环首 (取数组成员数 (文本1), 循环计次1

  • jsp页面中两种方法显示当前时间的简单实例

    在jsp页面实现显示当前的日期时间,我们可以用一下两种方式实现: 1. 通过在jsp页面添加Java代码实现,主要代码如下所示 java.text.SimpleDateFormat simpleDateFormat = new java.text.SimpleDateFormat( "yyyy-MM-dd HH:mm:ss"); java.util.Date currentTime = new java.util.Date(); String time = simpleDateForm

  • 使用jQuery实现两个div中按钮互换位置的实例代码

    使用jQuery实现两个div中按钮互换位置的实例代码

    效果如下 代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • 解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法

    解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法

    最近在使用OneThink中自带的kindeditor编辑器的时候,保存草稿的时候,输入的内容总是不能够保存到后台.如下图 通过分析URL,发现原来content值为空 明明有值,为什么是空呢?但是如果不采用异步方式提交表单的话,则可以获取到输入值.开始一直以kindeditor为是ajax的问题,最后,查阅资料才知道原来是kindeditor的问题.因为在异步提交数据的时候,并没有将kindeditor中输入的值,同步到对应的文本框上.正确的做法是,当kindeditor失去焦点的时候,就进行

  • 将input框中输入内容显示在相应的div中【三种方法可选】

    将input框中输入内容显示在相应的div中【三种方法可选】

    例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel=

  • 易语言在编辑框中只允许输入指定类型内容的方法

    易语言在编辑框中只允许输入指定类型内容的方法

    输入方式属性 所属对象:编辑框   操作系统支持:Windows 数据类型:整数型: 可供选择的属性值: 0.通常方式 1.只读方式 2.密码输入 3.整数文本输入 4.小数文本输入 5.输入字节 6.输入短整数 7.输入整数 8.输入长整数 9.输入小数 10.输入双精度小数 11.输入日期时间 例程 说明 本属性用于定义在指定编辑框中所允许输入的内容和显示方式. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如

  • 微信小程序登录时如何获取input框中的内容

    这篇文章主要介绍了微信小程序登录时如何获取input框中的内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <input type="text" placeholder-style="color:#fff;" bindin

随机推荐