2012-10-25 来源:网络
【实例名称】
JS代码实现从一个下拉列表往另一个下拉列表添加内容
【实例描述】
在网页中经常需要用户选择一些类似的信息(如个人爱好),为了明确用户的选择,通常用列表列出几乎所有的爱好,然后用户选择自己的爱好内容添加到另外一个列表中。本例就是实现这种选择效果。
【实例代码】
<script language="JavaScript"> //设计字符对象的trimEnd方法 String.prototype.trimEnd = function(trimString) { var re = new RegExp(trimString+"*$", "g"); return this.replace(re, ""); }; //设计数组对象的indexof方法 Array.prototype.indexOf = function(itemValue) { var nIndex = -1; for (var i=0; i<this.length; i++) { if (this[i] == itemValue) nIndex = i; } return nIndex; }; //定义变量-变量为当前文档中的控件对象 var oSrc = document.getElementById("oldSelect"); var oTarget = document.getElementById("newSelect"); var oCopy = document.getElementById("btnMove"); //定义按钮的click事件 oCopy.onclick = function() { var aSelectedIndexes = getSelectedIndexes(oSrc); for (var i=0; i<aSelectedIndexes.length; i++) { var oOption = document.createElement("OPTION"); oOption.text = oSrc.options[aSelectedIndexes[i]].text; oOption.value = oSrc.options[aSelectedIndexes[i]].value; oTarget.options.add(oOption); } }; //获取源下拉列表中被选择的内容 function getSelectedIndexes(oSrc) { var aSelectedIndexes = new Array(); for (var i=0; i<oSrc.options.length; i++) { if (oSrc.options[i].selected) aSelectedIndexes[aSelectedIndexes.length] = i;} return aSelectedIndexes;}/ /单击源下拉列表的事件oSrc.onclick = function() { this.selectedIndexes = getSelectedIndexes(this); if (this.selectedIndexes.length == 1) this.options[this.selectedIndexes].selected = false;}; //改变源下拉列表选择的事件 oSrc.onchange = function() {var j = this.selectedIndexes. indexOf(this.selectedIndex); if (j > -1) { this.options [this.selectedIndex].selected = false; this.selectedIndexes.splice(j, 1); } if (this.selectedIndexes.length > 0) { var nSelectedIndex; for (var i=0; i<this.selectedIndexes.length; i++){ nSelectedIndex = parseInt(this.selectedIndexes[i]); this.options[nSelectedIndex].selected = true;}}}; </script></html>
【运行效果】
【难点剖析】
本例的难点是如何判断下拉列表的选择内容,还有如何动态添加到另外一个下拉列表中。判断选择列表的内容需要通过列表索引获得,本例使用了方法“getselectedIndexes”。动态在下拉列表中创建元素,使用了DoM的方法“createElement”来创建“optiOn”元素,最后动态地为此元素赋值。
【源码下载】