zoukankan      html  css  js  c++  java
  • ListBox 选中、移动、全选、移除 javascript

    //前台页面源文件

    <tr>
            <td align="center" width="43%" height="20"><strong>备 选 项</strong></td>
            <td width="94" style="WIDTH: 94px">&nbsp;</td>
            <td align="center" width="43%"><strong>已 选 项</strong></td>
           </tr>
           <tr>
            <td vAlign="top"><asp:listbox id="Lb_Soure" runat="server" Width="100%" Height="232px"></asp:listbox></td>
            <td align="center" style="WIDTH: 94px"><input onclick="MoveAllItems(Lb_Soure, Lb_Object)" type="button" value="全选>>">
             <br>
             <br>
             <input onclick="MoveSingleItem(Lb_Soure, Lb_Object)" type="button" value="选中 >">
             <br>
             <br>
             <input onclick="MoveSingleItem(Lb_Object, Lb_Soure)" type="button" value="< 清除">
             <br>
             <br>
             <input onclick="MoveAllItems(Lb_Object,Lb_Soure )" type="button" value="<<全清"><INPUT type="hidden" name="txt_ObjectUser" style="WIDTH:10px">
            </td>
            <td vAlign="top"><asp:listbox id="Lb_Object" runat="server" Width="100%" Height="240px"></asp:listbox></td>
           </tr>
           <tr vAlign="bottom">
            <td align="center" colSpan="3" height="30">
             <input onclick="PostValue();" type="button" value="确 定"> <input onclick="window.close()" type="button" value="取 消">
            </td>
           </tr>

    //前台脚本

     

     //移动选中项目
      function MoveSingleItem(sel_source, sel_dest)
       {
          if (sel_source.selectedIndex<0)return;  //源:没有点选任何项目
          
          //for(var j=0; j<sel_dest.length; j++){
          // if(sel_dest.options[j].value==sel_source.options[sel_source.selectedIndex].value)
           // return;
          //}
            
          var oOption = document.createElement("OPTION");
       oOption.text=sel_source.options[sel_source.selectedIndex].text;
       oOption.value=sel_source.options[sel_source.selectedIndex].value;      
          sel_dest.options.add(oOption);
          
          sel_source.options.remove(sel_source.selectedIndex);
          
          CopyToControl();
                 
       }

         //设置选中项目
       function MoveAllItems(sel_source, sel_dest)
       {      
          var sel_source_len = sel_source.length;
          
          //先复制“源”所有项目:
          for (var j=0; j<sel_source_len; j++)
          {
           var oOption = document.createElement("OPTION");
        oOption.text=sel_source.options[j].text;
        oOption.value=sel_source.options[j].value;      
           sel_dest.options.add(oOption);
          }

          //然后删除“源”所有项目:
          for (var k=0;k<sel_source_len;k++)
          {
            sel_source.options.remove(0);
          }
          
          CopyToControl();
          
       }

       function SelectAll(theSel)  //选中select中全部项目
       {
       for (i = 0 ;i<theSel.length;i++)
           theSel.options[i].selected = true;
       }
       
       function  CopyToControl(){     //复制到其他控件
            var sControl=document.all.txt_ObjectUser;
            sControl.value="";     
         for(var i=0;i<document.all.Lb_Object.length;i++){   //拷贝数据    
         sControl.value=sControl.value+document.all.Lb_Object.options[i].value+',';
         }
       }

     

       //页面加载
      function On_PageLoad(){
       if(PageLoadFlag)return;
       PageLoadFlag=true;
        
        var theSel=document.all["Ddl_Org"];
          var re=/\&amp;/;
         
      
        //替换字符串
          if(theSel!=null){
        for(i=0;i<theSel.length;i++){
          do{
           var sTem=theSel.options[i].innerHTML;
              theSel.options[i].innerHTML = theSel.options[i].innerHTML.replace("&amp;","&");
             }while(sTem!=theSel.options[i].innerHTML)
           }
          }
       }

  • 相关阅读:
    海盗分赃问题-----简化问题,分而治之
    计算机组成原理之输入输出系统
    计算机组成原理之外围设备
    计算机组成原理之总线系统
    计算机组成原理之控制器
    计算机组成原理之存储器
    计算机组成原理之运算器
    网络配置4:STP生成树协议配置
    微信内置浏览器私有接口WeixinJSBridge介绍(转)
    使用ajax和history.pushState无刷新改变页面URL(转)
  • 原文地址:https://www.cnblogs.com/zhangzt/p/1610499.html
Copyright © 2011-2022 走看看