JS實(shí)現(xiàn)從一個下拉列表往另一個添加內(nèi)容

【實(shí)例名稱】

JS代碼實(shí)現(xiàn)從一個下拉列表往另一個下拉列表添加內(nèi)容

【實(shí)例描述】

在網(wǎng)頁中經(jīng)常需要用戶選擇一些類似的信息(如個人愛好)，為了明確用戶的選擇，通常用列表列出幾乎所有的愛好，然后用戶選擇自己的愛好內(nèi)容添加到另外一個列表中。本例就是實(shí)現(xiàn)這種選擇效果。

【實(shí)例代碼】

<script language="JavaScript">
//設(shè)計(jì)字符對象的trimEnd方法
String.prototype.trimEnd = function(trimString) {
    var re = new RegExp(trimString+"*$", "g");
    return this.replace(re, "");
};
//設(shè)計(jì)數(shù)組對象的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;
};
//定義變量－變量為當(dāng)前文檔中的控件對象
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);
    }
};
//獲取源下拉列表中被選擇的內(nèi)容
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>

【運(yùn)行效果】

【難點(diǎn)剖析】

本例的難點(diǎn)是如何判斷下拉列表的選擇內(nèi)容，還有如何動態(tài)添加到另外一個下拉列表中。判斷選擇列表的內(nèi)容需要通過列表索引獲得，本例使用了方法“getselectedIndexes”。動態(tài)在下拉列表中創(chuàng)建元素，使用了DoM的方法“createElement”來創(chuàng)建“optiOn”元素，最后動態(tài)地為此元素賦值。

【源碼下載】

本實(shí)例JS代碼下載