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

【实例描述】

在网页中经常需要用户选择一些类似的信息（如个人爱好），为了明确用户的选择，通常用列表列出几乎所有的爱好，然后用户选择自己的爱好内容添加到另外一个列表中。本例就是实现这种选择效果。

【实现代码】

<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>

【运行效果】

列表选择的效果如图6-4所示。

图6-4  列表选择的效果

【难点剖析】

本例的难点是如何判断下拉列表的选择内容，还有如何动态添加到另外一个下拉列表中。判断选择列表的内容需要通过列表索引获得，本例使用了方法“getSelectedIndexes”。动态在下拉列表中创建元素，使用了DOM的方法“createElement”来创建“option”元素，最后动态地为此元素赋值。