• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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; 
    } 
    } 
    }
    

    您可能感兴趣的文章:
    • JSP实现添加功能和分页显示实例分析
    • jsp连接MySQL操作GIS地图数据实现添加point的功能代码
    • JSP+Ajax 添加、删除多选框
    • asp+jsp+JavaScript动态实现添加数据行
    • JSP使用JDBC完成动态验证及采用MVC完成数据查询的方法
    • jsp操作MySQL实现查询/插入/删除功能示例
    • 高效的jsp分页查询
    • JSP简单添加,查询功能代码
    上一篇:jsp导出身份证到excel时候格式不对但以X结尾的却可以
    下一篇:一个JSP页面导致的tomcat内存溢出的解决方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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