48.从一个下拉列表往另一个下拉列表添加内容

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5  <head>
 6  </head>
 7 <body>
 8     <select id="oldSelect" name="love1" size="10" multiple>
 9         <option value="travl">旅游</option>
10         <option value="NBA">NBA体育</option>
11         <option value="study">学习</option>
12         <option value="music">音乐</option>
13         <option value="library">图书馆</option>
14         <option value="bookshop">新华书店</option>
15         <option value="shopping">逛街购物</option>
16     </select>
17     <input type="button" id="btnMove" value=">>>>">
18     <select id="newSelect" name="love2" size="10" multiple>
19     </select>
20 </body>
21 <script language="JavaScript">
22 //设计字符对象的trimEnd方法
23 String.prototype.trimEnd = function(trimString) {
24     var re = new RegExp(trimString+"*$", "g");
25     return this.replace(re, "");
26 };
27 //设计数组对象的indexof方法
28 Array.prototype.indexOf = function(itemValue) {
29     var nIndex = -1;
30     for (var i=0; i<this.length; i++)
31     {
32         if (this[i] == itemValue) nIndex = i;
33     }
34     return nIndex;
35 };
36 //定义变量－变量为当前文档中的控件对象
37 var oSrc = document.getElementById("oldSelect");
38 var oTarget = document.getElementById("newSelect");
39 var oCopy = document.getElementById("btnMove");
40 //定义按钮的click事件
41 oCopy.onclick = function() {
42     var aSelectedIndexes = getSelectedIndexes(oSrc);
43     for (var i=0; i<aSelectedIndexes.length; i++)
44     {
45         var oOption = document.createElement("OPTION");
46         var oOption = document.createElement("OPTION");
47         oOption.text = oSrc.options[aSelectedIndexes[i]].text;
48         oOption.value = oSrc.options[aSelectedIndexes[i]].value;
49         oTarget.options.add(oOption);
50     }
51 };
52 //获取源下拉列表中被选择的内容
53 function getSelectedIndexes(oSrc)
54 {
55     var aSelectedIndexes = new Array();
56 
57     for (var i=0; i<oSrc.options.length; i++)
58     {
59         if (oSrc.options[i].selected)
60             aSelectedIndexes[aSelectedIndexes.length] = i;
61     }
62 
63     return aSelectedIndexes;
64 }
65 //单击源下拉列表的事件
66 oSrc.onclick = function() {
67     this.selectedIndexes = getSelectedIndexes(this);
68     if (this.selectedIndexes.length == 1)
69         this.options[this.selectedIndexes].selected = false;
70 };
71 //改变源下拉列表选择的事件
72 oSrc.onchange = function() {
73     <!--
74         this.selectedIndexs 选中元素的集合
75     -->
76     var j = this.selectedIndexes.indexOf(this.selectedIndex);
77     if (j > -1)
78     {
79         this.options[this.selectedIndex].selected = false;
80         this.selectedIndexes.splice(j, 1);
81     }
82     if (this.selectedIndexes.length > 0)
83     {
84         var nSelectedIndex;
85         for (var i=0; i<this.selectedIndexes.length; i++)
86         {
87             nSelectedIndex = parseInt(this.selectedIndexes[i]);
88             this.options[nSelectedIndex].selected = true;
89         }
90     }
91 };
92 </script>
93 </html>
posted on 2017-03-03 02:06 Sharpest 阅读(262) 评论(0) 收藏举报