JS实现从一个下拉列表往另一个添加内容

【实例名称】

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”元素，最后动态地为此元素赋值。

【源码下载】

本实例JS代码下载