javascript实例教程之ListBox的选中、移动、全选、移除

发布时间:2019-11-05编辑:脚本学堂
本文介绍下,一个javascript的实例教程,实现listbox的选中、移动、全靠以及移除操作。有需要的朋友参考下吧。

1,前台页面源文件
 

复制代码 代码示例:
<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>

2,前台脚本
 

复制代码 代码示例:

<script>
//移动选中项目
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;/;
     
      //替换字符串 www.jb200.com
      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)
       }
      }
}
</script>