列表中項的自由加減實現的例子

來源:互聯網
上載者:User

<div align=center>
<form>
  <table align=center bgcolor="#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0>
<tr><td height=4></td></tr>
<tr><td> 待選擇的部門列表:</td><td></td><td> 已選擇的部門列表:</td></tr>

<tr><td>

<select name="CanSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="AddOne();">
   
     <option value="'N900'">安技環保部</option>
   
     <option value="'1600'">安技環保處</option>
       
     <option value="'9400'">報社</option>
      
     <option value="'C300'">採購部</option>
           
     <option value="'N000'">廠長辦公室</option>
       
     <option value="'3220'">衝壓廠技術科</option>
   
     <option value="'2000'">黨委辦公室</option>
   
     <option value="'D200'">黨委宣傳部</option>
       
     <option value="'D100'">黨委組織部</option>
   
     <option value="'2400'">黨校</option>
   
     <option value="'3500'">第二車體廠</option>
       
     <option value="'4300'">第二裝配廠</option>
       
     <option value="'3A00'">第三裝配廠</option>
   
     <option value="'3400'">第一車體廠</option>
   
     <option value="'3600'">第一裝配廠</option>
       
     <option value="'4200'">電鍍車間</option>
   
     <option value="'9500'">電視台</option>
       
     <option value="'E800'">動力廠</option>
   
     <option value="'4000'">鍛工車間</option>
   
     <option value="'D400'">工會</option>
       
     <option value="'B000'">公司辦公室</option>
       
     <option value="'B400'">計劃財務部</option>
       
     <option value="'0700'">監察審計部</option>
      
     <option value="'6300'">進出口公司</option>
       
     <option value="'4100'">精鑄車間</option>
       
     <option value="'N700'">離退休管理部</option>
       
     <option value="'E600'">木工廠</option>
               
     <option value="'C500'">品質保證部</option>
       
     <option value="'B100'">企業管理部</option>
   
     <option value="'B110'">資訊中心</option>
       
     <option value="'B600'">企業文化部</option>
        
     <option value="'B300'">人力資源部</option>
       
     <option value="'N600'">社會工作部</option>
           
     <option value="'C400'">生產製造部</option>
           
     <option value="'C600'">市場二部</option>
   
     <option value="'C200'">市場一部</option>
   
     <option value="'2700'">團委</option>
   
     <option value="'C100'">研發中心</option>
   
     <option value="'0350'">職工培訓中心</option>
   
     <option value="'1500'">品質保證部</option>
   
     <option value="'3000'">鑄鋼廠</option>
   
     <option value="'3300'">轉向架廠</option>
   
     <option value="'N300'">資產管理部</option>
   
     <option value="'B800'">綜合保障部</option>
   
     <option value="'2200'">組織部</option>
   
</select>
 </td>
 
 <td align=center width=40>
 <table width=100%>
 <tr><td align=center ><input type=button name="AddSel" value=">" title="添加所選擇的部門"></td></tr>
 <tr><td align=center ><input type=button name="AddAll" value="≥" title="添加所有的部門"></td></tr>
 <tr><td align=center ><input type=button name="DelSel" value="<" title="刪掉所選擇的部門"></td></tr>
 <tr><td align=center ><input type=button name="DelAll" value="≤" title="刪掉所有的部門"></td></tr>
 </table>
 
 </td>
 
 
 
 <td align=right>
 <select name="HaveSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple  ondblclick="DelOne();">

</select>
 </td></tr>
 </table></form>
 </div>
 
   
   <script language=javascript>
    var fldFrom=document.forms[0].CanSel;    //待選擇單位列表
    var fldTo=document.forms[0].HaveSel;     //已添加單位列表

  //判斷當前選擇的是否已經添加了
  function isNotExist(oneStr,oneSel)
  {
    for(var i=0;i<oneSel.length;i++)
 {
    if (oneSel.options[i].text==oneStr)
    {
       return false;
       break;
      }
 }
 return true;
  }
 
  //添加選擇的
  function AddSele()
  {
    for(var i=0;i<fldFrom.length;i++)
 {
    if (fldFrom.options[i].selected )
    {
      if (isNotExist(fldFrom.options[i].text,fldTo))
         {fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
         }
          
      }
     
            fldFrom.options[i].selected=false;
     
 }
  }
 
 
   //刪除選擇的
  function DelSele()
  {
    for(var i=fldTo.length-1;i>=0;i--)
 {
    if (fldTo.options[i].selected )
    {
        fldTo.options[i] = null;
      }
 }
  }
 
  //添加所有的
  function AddAlle()
  {
    fldTo.length=0;
     for(var i=0;i<fldFrom.length;i++)
 {
  fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
  fldFrom.options[i].selected=false;
 }
  }
 
 
 //添加一個(雙擊)
  function AddOne()
  {
   
  if (isNotExist(fldFrom.options[fldFrom.selectedIndex].text,fldTo))
  {fldTo.options[fldTo.length] = new Option(fldFrom.options[fldFrom.selectedIndex].text,fldFrom.options[fldFrom.selectedIndex].value);
  fldFrom.options[fldFrom.selectedIndex].selected=false;
  }
  }
 
 
 //刪除所有
  function DelAlle()
  {
    fldTo.length=0;
  }
 
  //刪除一個(雙擊)
  function DelOne()
  {
    fldTo.options[fldTo.selectedIndex]=null;
  }
 
  //進入前判斷
 function goEnter()
 {
        if (fldTo.length==0)
         {
           alert("請選擇至少一個部門!");
         }
        else
         {
              for(var i=0;i<fldTo.length;i++)
            {           
            fldTo.options[i].selected=true;
            }
             
     
               document.forms[0].submit();
          
           
           for(var i=0;i<fldTo.length;i++)
            {           
            fldTo.options[i].selected=false;
            }           
         }
 }
 

</script> 

<div align=center><form> <table align=center bgcolor="#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0><tr><td height=4></td></tr><tr><td> 待選擇的部門列表:</td><td></td><td> 已選擇的部門列表:</td></tr><tr><td><select name="CanSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="AddOne();"> <option value="'N900'">安技環保部</option> <option value="'1600'">安技環保處</option> <option value="'9400'">報社</option> <option value="'C300'">採購部</option> <option value="'N000'">廠長辦公室</option> <option value="'3220'">衝壓廠技術科</option> <option value="'2000'">黨委辦公室</option> <option value="'D200'">黨委宣傳部</option> <option value="'D100'">黨委組織部</option> <option value="'2400'">黨校</option> <option value="'3500'">第二車體廠</option> <option value="'4300'">第二裝配廠</option> <option value="'3A00'">第三裝配廠</option> <option value="'3400'">第一車體廠</option> <option value="'3600'">第一裝配廠</option> <option value="'4200'">電鍍車間</option> <option value="'9500'">電視台</option> <option value="'E800'">動力廠</option> <option value="'4000'">鍛工車間</option> <option value="'D400'">工會</option> <option value="'B000'">公司辦公室</option> <option value="'B400'">計劃財務部</option> <option value="'0700'">監察審計部</option> <option value="'6300'">進出口公司</option> <option value="'4100'">精鑄車間</option> <option value="'N700'">離退休管理部</option> <option value="'E600'">木工廠</option> <option value="'C500'">品質保證部</option> <option value="'B100'">企業管理部</option> <option value="'B110'">資訊中心</option> <option value="'B600'">企業文化部</option> <option value="'B300'">人力資源部</option> <option value="'N600'">社會工作部</option> <option value="'C400'">生產製造部</option> <option value="'C600'">市場二部</option> <option value="'C200'">市場一部</option> <option value="'2700'">團委</option> <option value="'C100'">研發中心</option> <option value="'0350'">職工培訓中心</option> <option value="'1500'">品質保證部</option> <option value="'3000'">鑄鋼廠</option> <option value="'3300'">轉向架廠</option> <option value="'N300'">資產管理部</option> <option value="'B800'">綜合保障部</option> <option value="'2200'">組織部</option> </select> </td> <td align=center width=40> <table width=100%> <tr><td align=center ><input type=button name="AddSel" value=">" title="添加所選擇的部門"></td></tr> <tr><td align=center ><input type=button name="AddAll" value="≥" title="添加所有的部門"></td></tr> <tr><td align=center ><input type=button name="DelSel" value="<" title="刪掉所選擇的部門"></td></tr> <tr><td align=center ><input type=button name="DelAll" value="≤" title="刪掉所有的部門"></td></tr> </table> </td> <td align=right> <select name="HaveSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="DelOne();"></select> </td></tr> </table></form> </div> <script language=javascript> var fldFrom=document.forms[0].CanSel; //待選擇單位列表 var fldTo=document.forms[0].HaveSel; //已添加單位列表 //判斷當前選擇的是否已經添加了 function isNotExist(oneStr,oneSel) { for(var i=0;i<oneSel.length;i++) { if (oneSel.options[i].text==oneStr) { return false; break; } } return true; } //添加選擇的 function AddSele() { for(var i=0;i<fldFrom.length;i++) { if (fldFrom.options[i].selected ) { if (isNotExist(fldFrom.options[i].text,fldTo)) {fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value); } } fldFrom.options[i].selected=false; } } //刪除選擇的 function DelSele() { for(var i=fldTo.length-1;i>=0;i--) { if (fldTo.options[i].selected ) { fldTo.options[i] = null; } } } //添加所有的 function AddAlle() { fldTo.length=0; for(var i=0;i<fldFrom.length;i++) { fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value); fldFrom.options[i].selected=false; } } //添加一個(雙擊) function AddOne() { if (isNotExist(fldFrom.options[fldFrom.selectedIndex].text,fldTo)) {fldTo.options[fldTo.length] = new Option(fldFrom.options[fldFrom.selectedIndex].text,fldFrom.options[fldFrom.selectedIndex].value); fldFrom.options[fldFrom.selectedIndex].selected=false; } } //刪除所有 function DelAlle() { fldTo.length=0; } //刪除一個(雙擊) function DelOne() { fldTo.options[fldTo.selectedIndex]=null; } //進入前判斷 function goEnter() { if (fldTo.length==0) { alert("請選擇至少一個部門!"); } else { for(var i=0;i<fldTo.length;i++) { fldTo.options[i].selected=true; } document.forms[0].submit(); for(var i=0;i<fldTo.length;i++) { fldTo.options[i].selected=false; } } } </script>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。