在JavaScript中的兩個多選框之間交換值

Question

如果我在最后一個位置，如何在選擇框a中選擇第一個元素。 如果我在列表的中間，如果我當前的位置是最后一位，我可以選擇但不能選擇列表中的第一項。

function MoveSelected(objSourceElement, objTargetElement)
    {
        var aryTempSourceOptions = new Array();
        var x = 0;
        var y = 0; 
        //looping through source element to find selected options
        for (var i = 0; i < objSourceElement.length; i++) {
            if (objSourceElement.options[i].selected) {
                y++;
                //need to move this option to target element
                var intTargetLen = objTargetElement.length++;
                objTargetElement.options[intTargetLen].text = objSourceElement.options[i].text;
                objTargetElement.options[intTargetLen].value = objSourceElement.options[i].value;
            }
           else {
                //storing options that stay to recreate select element
                var objTempValues = new Object();
                objTempValues.text = objSourceElement.options[i].text;
                objTempValues.value = objSourceElement.options[i].value;
                aryTempSourceOptions[x] = objTempValues;
                x++;                    
            }               
        }       
        if (y==0) alert("Please select any Course");
        //resetting length of source
        objSourceElement.length = aryTempSourceOptions.length;
        //looping through temp array to recreate source select element
        for (var i = 0; i < aryTempSourceOptions.length; i++) {
            objSourceElement.options[i].text = aryTempSourceOptions[i].text;
            objSourceElement.options[i].value = aryTempSourceOptions[i].value;
           //objSourceElement.options[i].selected = false;
        } 
    }

Answer 1

我參加這個聚會很晚，但是我有在兩個容器之間交換所選值的代碼，請注意如果存在選項組，請注意它們：

function MoveSelectedItems(source, destination)
{

var sourceElement = document.getElementById(source);

var destinationElement = document.getElementById(destination);

var toSource = {};
var toDestination = {};

// Move all children from our destination element into our toDestination
// dicationary.  This will be used to make sure groups are properly populated
// between source and destination
while (destinationElement.firstChild)
{
    var child = destinationElement.firstChild;
    destinationElement.removeChild(child);
    toDestination[child.label] = child;
}

// Loop through all the children of our source and move them to toDestination if
// they're selected and to toSource if not.  Also creates options groups as necessary
while (sourceElement.firstChild)
{
    var outerChild = sourceElement.firstChild;
    sourceElement.removeChild(outerChild)

    // If the current outerChild is an option group...
    if (outerChild.nodeName == 'OPTGROUP')
    {
        // Loop through the children of the current option group outer child
        while (outerChild.firstChild)
        {
            var innerChild = outerChild.firstChild;
            outerChild.removeChild(innerChild);

            // If the child of the option group is selected...
            if (innerChild.selected == true)
            {
                // If the option group isn't already in the destination dictionary
                // add it using the label of the outer child as the key
                if (!(outerChild.label in toDestination))
                {
                    toDestination[outerChild.label] = document.createElement('optgroup');
                    toDestination[outerChild.label].label = outerChild.label;
                }

                innerChild.selected = false;

                // Add the inner child to it's parent group in the destination dictionary
                toDestination[outerChild.label].appendChild(innerChild);
            }
            else  // If the child of the option group isn't selected...
            {
                // If the option group isn't already in the source ditionary
                // add it using the label of the outer child as the key
                if (!(outerChild.label in toSource))
                {
                    toSource[outerChild.label] = document.createElement('optgroup');
                    toSource[outerChild.label].label = outerChild.label;
                }

                innerChild.selected = false;

                // Add the inner child to it's parent group in the source dictionary
                toSource[outerChild.label].appendChild(innerChild);
            }
        }
    }
    else if (outerChild.nodeName == 'OPTION') // If the outer child is an option...
    {
        // If the outer child is selected, add it to the destination
        // dictionary using its label as the key.
        // Otherwise, if the the outer child is not selected, add it to
        // the source dictionary using it's label as the key.
        if (outerChild.selected == true)
        {
            outerChild.selected = false;

            toDestination[outerChild.label] = outerChild;
        }
        else
        {
            toSource[outerChild.label] = outerChild;
        }
    }
}

// Loop through the elements in toSource, sort them and append them to
// the Source element
for (var i in toSource)
{
    sourceElement.appendChild(toSource[i]);
}

// Loop through the elements in toDestination, sort them and append them to
// the Destination element
for (var i in toDestination)
{
    destinationElement.appendChild(toDestination[i]);
}

}

Answer 2

Java腳本功能：

function listbox_move(listID, direction) {
var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;
if (-1 == selIndex) {
    alert("Please select an option to move.");
    return;
}
var increment = -1;
if (direction == 'up')
    increment = -1;
else
    increment = 1; if ((selIndex + increment) < 0 || (selIndex + increment) > (listbox.options.length - 1)) {
    return;
}
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text
listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;
listbox.selectedIndex = selIndex + increment;
}

function listbox_moveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for (var count = 0; count < src.options.length; count++) {
    if (src.options[count].selected == true) {
        var option = src.options[count];
        var newOption = document.createElement("option");
        newOption.value = option.value;
        newOption.text = option.text;
        newOption.selected = true;
        try {
            dest.add(newOption, null);
            src.remove(count, null);
        } catch (error) {
            dest.add(newOption);
            src.remove(count);
        }
        count--;
    }
}
}

function listbox_selectall(listID, isSelect) {
var listbox = document.getElementById(listID);
for (var count = 0; count < listbox.options.length; count++) {
    listbox.options[count].selected = isSelect;
}
}

HTML代碼：

<table>
<tr valign="top">
    <td>
        <SELECT id="s" size="10" multiple>
            <OPTION value="a">Afghanistan</OPTION>
            <OPTION value="b">Bahamas</OPTION>
            <OPTION value="c">Barbados</OPTION>
            <OPTION value="d">Belgium</OPTION>
            <OPTION value="e">Bhutan</OPTION>
            <OPTION value="f">China</OPTION>
            <OPTION value="g">Croatia</OPTION>
            <OPTION value="h">Denmark</OPTION>
            <OPTION value="i">France</OPTION>
        </SELECT>
    </td>
    <td valign="center">
        <a href="#" onclick="listbox_moveacross('s', 'd')">&gt;&gt;</a>
        <br/>
        <a href="#" onclick="listbox_moveacross('d', 's')">&lt;&lt;</a>
    </td>
    <td>
        <SELECT id="d" size="10" multiple>
            <OPTION value="a">Afghanistan</OPTION>
            <OPTION value="b">Bahamas</OPTION>
            <OPTION value="c">Barbados</OPTION>
            <OPTION value="d">Belgium</OPTION>
            <OPTION value="e">Bhutan</OPTION>
            <OPTION value="f">China</OPTION>
            <OPTION value="g">Croatia</OPTION>
            <OPTION value="h">Denmark</OPTION>
            <OPTION value="i">France</OPTION>
        </SELECT>
    </td>
</tr>
</table>