Mark Chou的部落格

主要為本人的筆記

功能:主要應用類似VB的List多選的介面，這只是模擬完後的模板。
function moveOption(e1, e2) 支援多選，同時增加同時刪除
function selectAll(s)  最後按下按鈕時，會將list2的內容全選。

 
JS碼

132
<script language="JavaScript">
function moveOption(e1, e2){ 
    try{ 
        for (var i=0;i<e1.options.length;i++)
        if (e1.options[i].selected) {
        var e=e1.options[i]; 
        e2.options.add(new Option(e.text, e.value,false,true));
        e1.options.remove(e1.selectedIndex); 
        i--; 
        }
    }catch(e){} 
} 
function selectAll(s) {
    for (var i=0;i<s.options.length;i++)
    s.options[i].selected = true;
}
</script>

HTML碼

<form method="POST" action="test.jsp" name="abc" > 
 <table border=0 cellpadding=0 cellspacing=0> 
   <tr>
      <td> 
       <select id=list1 size=27 ondblclick="moveOption(this, this.form.list2)" name="DA" style="width:200" multiple> 
       <option value="選項A">選項A</option> 
       <option value="選項B">選項B</option> 
       <option value="選項C">選項C</option> 
       <option value="選項D">選項D</option> 
       </select>
      </td>
      <td width=40 align=center> 
        <input name=add type=button value="選取" onclick="moveOption(this.form.list1, this.form.list2)"><br><br> 
        <input name=sub type=button value="移除" onclick="moveOption(this.form.list2, this.form.list1)"> 
      </td>
      <td> 
       <select id=list2 size=27 ondblclick="moveOption(this, this.form.list1)" name="DE" style="width:200" multiple > 
       </select> 
      </td>
   </tr> 
</table>
<p><input type="submit" value="按鈕" name="B1" onclick="selectAll(this.form.list2)"></p>
</form>
<%
String[] ary=request.getParameterValues("DE");
    if (ary != null) { 
        for(int i=0;i<ary.length;i++){
        out.print(ary[i]+"<br>");
        }
    }
%>

參考轉貼請先告知，尊重作者。