`
冰冻的心
  • 浏览: 12800 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

两个下拉列表框value值相互转移

阅读更多
[size=medium]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtmlSelect.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

   <script  type="text/javascript">
   window.onload=function(){
   /*******************************右移********************************************/
     document.getElementById("button3").onclick=function(){
       var firstSelect= document.getElementById("select");   //第一个下拉框
        var twoSelect= document.getElementById("select1");  //第二个下拉框
        var   optionfirst=firstSelect.getElementsByTagName("option");  //获得的是一个数组
          var  len=optionfirst.length;
          for(var i=0;i<len;i++){
                var  optionName=optionfirst[i];//获得所有的 option 里面的值
               //
               //必须将选中的移动,,所以
             //  alert(firstSelect.selectedIndex);  //没有被选中的  下标  永远都是-1,选中的为该当前下标
               if(firstSelect.selectedIndex!=-1){
               twoSelect.appendChild(optionfirst[firstSelect.selectedIndex]);
               }
                } 
     }
    
     /*******************************左移********************************************/
     document.getElementById("button2").onclick=function(){
       var firstSelect= document.getElementById("select");   //第一个下拉框
        var twoSelect= document.getElementById("select1");  //第二个下拉框
        var   optionfirst=twoSelect.getElementsByTagName("option");  //获得的是一个数组
          var  len=optionfirst.length;
          for(var i=0;i<len;i++){
                var  optionName=optionfirst[i];//获得所有的 option 里面的值
               //
               //必须将选中的移动,,所以
             //  alert(firstSelect.selectedIndex);  //没有被选中的  下标  永远都是-1,选中的为该当前下标
               if(twoSelect.selectedIndex!=-1){
              firstSelect.appendChild(optionfirst[twoSelect.selectedIndex]);
               }
                } 
     }

      /*******************************全部右移********************************************/
     document.getElementById("button4").onclick=function(){
       var firstSelect= document.getElementById("select");   //第一个下拉框
        var twoSelect= document.getElementById("select1");  //第二个下拉框
        var   optionfirst=firstSelect.getElementsByTagName("option");  //获得的是一个数组
             var  len=optionfirst.length;
        for(var i=0;i<len;i++){
           twoSelect.appendChild(optionfirst[0]);
        }
      
     }
    
    
           /*******************************全部左移********************************************/
     document.getElementById("button").onclick=function(){
       var firstSelect=document.getElementById("select1");
      
          //第一个下拉框
        var twoSelect= document.getElementById("select");  //第二个下拉框
        var   optionfirst=firstSelect.getElementsByTagName("option");  //获得的是一个数组
             var  len=optionfirst.length;
        for(var i=0;i<len;i++){
           twoSelect.appendChild(optionfirst[0]);//只要控制移动的下标为0  就移动
        }
      
     }
        
           /*******************************双击移动到右边********************************************/
     document.getElementById("select").ondblclick=function(){
         var first=this.getElementsByTagName("option");
         var twoSelect= document.getElementById("select1");  //第二个下拉框
       for(var i=0;i<first.length;i++){
       twoSelect.appendChild(first[this.selectedIndex])
      
       }
     }
    
             /*******************************双击移动到左边  实现的重要的一个原理是找选中的下标即this.selectedIndex ********************************************/
     document.getElementById("select1").ondblclick=function(){
        /*var first=this.getElementsByTagName("option");
         var twoSelect= document.getElementById("select");  //第二个下拉框  
       for(var i=0;i<first.length;i++){
       twoSelect.appendChild(first[this.selectedIndex])
       } */
      
       //优化后的。。。
       var first=this.getElementsByTagName("option");
                 alert(this.selectedIndex);
           var twoSelect= document.getElementById("select");
           twoSelect.appendChild(this[this.selectedIndex]);
     }
   
    
    
   }
  
   </script>
  


  </head>
 
  <body>
  <div>
         <select name="select" size="15" multiple="multiple" id="select" >
    <option value="数学">数学</option>
    <option  value="语文">语文</option>
    <option value="外语">外语</option>
    <option  value="物理">物理</option>
    <option  value="化学">化学</option>
    <option  value="生物">生物</option>
    <option  value="历史">历史</option>
  </select>
  <input type="submit" name="button2" id="button2" value="《《左移" />
  <input type="submit" name="button3" id="button3" value="右移》》" />
  <input type="submit" name="button4" id="button4" value="全部右移》》" />
  <input type="submit" name="button" id="button" value="《《全部左移" />
  <select name="select2" size="15" multiple="multiple" id="select1" >

  </select>
  <br/>
  <br/>
  </div>
  </body>
</html>

[/size]
分享到:
评论

相关推荐

    JavaScript控制两个列表框listbox左右交换数据的方法

    总结来说,JavaScript的`listbox_moveacross`函数实现了在两个列表框之间移动被选中选项的功能,适用于需要用户交互选择并转移数据的场景,如设置选择、多选过滤等。这个功能的实现依赖于对DOM操作的深入理解,包括...

    struts2 标签库 帮助文档

    optiontransferselect标签:创建两个选项以及转移下拉列表项,该标签生成两个下拉列表框,同时生成相应的按钮,这些按钮可以控制选项在两个下拉列表之间移动、排序。 radio标签:单选框。 optgroup标签:生成一个...

    网页制作测试题及答案借鉴.pdf

    这些技术是构建网页和...9. 选项菜单(下拉列表)使用`&lt;select&gt;`标记符创建。 理解这些基本概念对于网页制作至关重要,它们构成了网页的基础结构和样式控制。学习和掌握这些知识能帮助创建功能丰富、设计美观的网页。

    js简单实现Select互换数据的方法

    这种方法可以应用在需要临时交换两个下拉列表数据的场景中,比如用户在表单填写过程中,需要将一个列表中的某些选项临时转移到另一个列表中,进行比对或其他操作。运行效果显示,在点击相应的按钮后,两个Select元素...

    Matlab中常见分布函数的拟合与KS检验:概率分布探索及应用

    内容概要:本文详细介绍了如何在Matlab中进行常见分布函数的拟合以及KS检验的方法。首先概述了多种常见的概率分布,如正态分布、对数正态分布、伽马分布等。接着,通过具体实例展示了如何使用Matlab内置函数fitdist进行分布拟合,并解释了拟合过程中参数的选择和调整。随后,文章讲解了KS检验的基本概念及其在Matlab中的实现方式,强调了KS检验在验证拟合效果中的重要性。最后,文章鼓励读者进一步探索其他类型的分布,指出不同分布在特定场景下的独特价值。 适合人群:对统计学有一定了解并希望通过Matlab工具深入研究数据分布特征的研究人员、学生和技术爱好者。 使用场景及目标:适用于需要对数据进行概率分布建模和验证的科研项目或数据分析任务。主要目标是帮助读者掌握Matlab环境下进行分布拟合和KS检验的具体操作步骤,提高对不同类型分布的理解和应用能力。 其他说明:文中提供了详细的代码片段作为示例,便于读者动手实践。同时,作者也提醒读者注意KS检验结果的解读,确保所选模型的有效性和合理性。

    Python示例源码-编写脚本从Unsplash下载随机图片并设置为壁纸-大作业.zip

    Python示例源码-编写脚本从Unsplash下载随机图片并设置为壁纸-大作业.zip

    基于FPGA的直方图统计与均衡算法:图像处理中的对比度增强技术实现 · FPGA 实用版

    内容概要:本文详细介绍了基于FPGA的直方图统计和直方图均衡算法的实现方法。直方图统计用于对图像进行有效的统计分析,而直方图均衡则是一种常见的图像对比度增强算法。文中不仅解释了这两个概念的基本原理,还提供了具体的算法公式和源码示例。特别强调了FPGA的并行计算能力和性能优化技巧,如流水线技术和多像素并行处理,以提升图像处理的速度和效率。此外,文章还展望了FPGA在未来图像处理领域的广泛应用前景,特别是结合深度学习和神经网络技术的可能性。 适合人群:从事图像处理、嵌入式系统开发的技术人员,尤其是对FPGA有一定了解的研究人员和工程师。 使用场景及目标:适用于需要深入了解FPGA在图像处理中的应用,特别是在直方图统计和直方图均衡方面的需求。目标是掌握这两种算法的具体实现方法和技术细节,以便应用于实际项目中。 其他说明:本文不仅提供了理论知识,还包括实用的代码示例,帮助读者更好地理解和实践FPGA在图像处理中的应用。

    基于PV-BUS结构的最小功率点跟踪研究.zip

    基于PV-BUS结构的最小功率点跟踪研究.zip

    MFCSocket编程专题知识讲座.pptx

    MFCSocket编程专题知识讲座.pptx

    Python示例源码-十进制与二进制互转转换器-大作业.zip

    Python示例源码-十进制与二进制互转转换器-大作业.zip

    excel表格的使用技巧.pptx

    excel表格的使用技巧.pptx

    Python源码-你好.zip

    Python源码-你好.zip

    哈工大CSAPP大作业

    哈工大CSAPP大作业

    阻尼比对串列双圆柱二自由度涡激振动及传热影响的数值研究.zip

    阻尼比对串列双圆柱二自由度涡激振动及传热影响的数值研究.zip

    模块化多关节绳驱动并联机器人设计.zip

    模块化多关节绳驱动并联机器人设计.zip

    能源管理领域:基于MATLAB的虚拟电厂鲁棒优化调度模型(含源荷双重不确定性) · 鲁棒优化

    内容概要:本文深入探讨了虚拟电厂(VPP)的日前鲁棒优化调度问题,特别是在源荷双重不确定性背景下。文中介绍了三个基于MATLAB的鲁棒优化调度模型,分别考虑了不同类型的不确定性因素。程序一主要关注虚拟电厂的日前经济调度,通过优化算法确定各个时间段内的燃气轮机出力、购电量、售电量及储能充放电功率等关键参数,以实现最佳经济效益。程序二和程序三在此基础上进一步引入了负荷和光伏的不确定性,提高了调度的鲁棒性和适应性。整个过程中,通过定义目标函数和设置多种约束条件,确保了模型的有效性和实用性。最终,借助MATLAB和CPLEX优化工具箱进行了仿真验证,展示了各机组的出力结果和储能分时电价调度情况。 适合人群:从事电力系统调度、能源管理及相关领域的研究人员和技术人员,尤其是对鲁棒优化方法感兴趣的学者。 使用场景及目标:适用于需要处理源荷双重不确定性的虚拟电厂日前经济调度场景,旨在提升电力系统的经济运行效率和能源利用率,确保调度决策的科学性和可靠性。 其他说明:本文不仅提供了详细的理论分析,还给出了具体的MATLAB代码实现,便于读者理解和实践。此外,文中引用了相关文献,有助于深入了解鲁棒优化模型的具体化简求解过程。

    Python源码-数据分析-【 项目:深圳市二手房房价分析及预测 】.zip

    Python源码-数据分析-【 项目:深圳市二手房房价分析及预测 】.zip

    Python示例源码-图像格式转换-大作业.zip

    Python示例源码-图像格式转换-大作业.zip

    大连华铁海兴MES 解决方案介绍.pdf

    大连华铁海兴MES 解决方案介绍.pdf

    Python示例源码-Instagram用户资料-大作业.zip

    Python示例源码-Instagram用户资料-大作业.zip

Global site tag (gtag.js) - Google Analytics