首頁 > 開發者 > Java

Java Web基礎：第十九講 JavaScript處理（二）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文內容摘自：《Java Web開發教程——入門與提高篇（JSP+Servlet）》

執行個體：組合列表框應用背景：頁面中有兩個列表框，需要把左邊的一些選項添加到右邊的列表框中，或者把左邊的一些選項移動到左邊的列表框中。典型例子：組合列表框的效果：效果4.1所示。                               圖4.1 組合列表框實現的基本思路：l         編寫init方法對兩個列表框進行初始化；l         為body添加onload事件調用init方法；l         編寫move(s1,s2)方法把s1中選中的選項添加到s2中，同時在s1中刪除該選項；l         編寫moveAll(s1,s2)方法把s1中所有的選項都移動到s2中；l         為中間的4個按鈕添加onclick事件，分別調用move(s1,s2) 和moveAll(s1,s2)兩個方法。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><script language="javascript" type="text/javascript">   // 對下拉框資訊進行初始化   function init(){      var options = new Array(10);      for(i = 0;i<10;i++)      {          options[i] = "選項"+(i+1);      }      s1.length=10;      for(i = 0;i<10;i++)      {          s1.options[i].value=i+1;          s1.options[i].text=options[i];      }   }      // 把選中的選項移動到右邊   function move(s1,s2){      // 判斷是否有選擇項      index = s1.selectedIndex      if(index==-1){         alert("沒有選擇");         return;      }            // 修改s2，把s1中選中的選項添加到s2中      s2.length++;      s2.options[s2.length-1].value = s1.options[index].value;      s2.options[s2.length-1].text= s1.options[index].text;            // 刪除s1中被選擇的選項      s1.remove(index);         }      // 把所有選項移動到右邊   function moveAll(s1,s2){      // 判斷是否有選擇項      if(s1.length == 0){         alert("沒有可用選擇");         return;      }            // 把s1中的選項添加到s2中      s2.length = s1.length + s2.length;      for(i=0;i<s1.length;i++){         s2.options[s2.length-s1.length+i].value=s1.options[i].value;         s2.options[s2.length-s1.length+i].text=s1.options[i].text;      }       // 清空s1      s1.length = 0;         }</script><style type="text/css">   input {width =40}</style>           <head>       <title>jsp4-1-1-c.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">-->     </head>     <body onload="init()">       <table>           <tr>              <td>                  <select name="s1" size=10 style="width: 100">                  </select>              </td>              <td>                  <input type="button" name="moveToRight" value=">" onClick="move(s1,s2)">                  <br>                  <input type="button" name="moveAllToRight" value=">>" onClick="moveAll(s1,s2)">                  <br>                  <input type="button" name="moveToLeft" value="&lt;" onClick="move(s2,s1)">                  <br>                  <input type="button" name="moveAllToLeft" value="&lt;&lt;" onClick="moveAll(s2,s1)">                  <br>              </td>              <td>                  <select name="s2" size=10 style="width: 100">                  </select>              </td>           </tr>       </table>    </body></html>上一講： 第十八講 JavaScript處理（一）下一講： 第二十講 Ajax概述李緒成 CSDN Blog：http://blog.csdn.net/javaeeteacher邀請您為好友：http://student.csdn.net/invite.php?u=124362&c=7be8ba2b6f3b6cc5

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More