Переключение пунктов меню между двумя списками с помощью кнопок в JavaScript - PullRequest
Новая
       10

Переключение пунктов меню между двумя списками с помощью кнопок в JavaScript

0 голосов
/ 21 февраля 2010

У меня есть школьное задание, над которым я работаю, и я полностью озадачен тем, почему он делает то, что делает. В основном это левый список выбора, 2 средние кнопки и правый список выбора. Цель состоит в том, чтобы перемещать опции между списками. Моя проблема заключается в следующем: выбор сделан в левом списке, нажата кнопка перемещения в правый список, в правый список добавлена ​​опция с именем «undefined» и выбор в левом списке исчезает. Я не хочу, чтобы кто-то делал за меня домашнее задание, но советы и подсказки очень ценятся.

Вот мой код: 

<script type="text/javascript">
/* <![CDATA[ */
function moveRight() {
    var leftCurText = document.forms[0].leftSide.selectedIndex.text;
    var leftCurValue = document.forms[0].leftSide.selectedIndex.value;
    var leftCurName = document.forms[0].leftSide.selectedIndex;

    if (leftCurName != -1) {        
        var listName = new Option();
        listName.text = leftCurText;
        listName.value = leftCurValue;
        nextItem = document.forms[0].rightSide.length;
        document.forms[0].rightSide.options[nextItem] = listName;
        document.forms[0].leftSide.options[leftCurName] = null;
    } else if (document.forms[0].leftSide.length <= 0) {
        window.alert("There are no more options in the left list")
    }
    else
        window.alert("No option is selected on the left side");
}

function moveLeft() {
    var rightCurText = document.forms[0].rightSide.selectedIndex.text;
    var rightCurValue = document.forms[0].rightSide.selectedIndex.value;
    var rightCurName = document.forms[0].rightSide.selectedIndex;

    if (rightCurName != -1) {
        var listName = new Option();
        listName.text = rightCurText;
        listName.value = rightCurValue;
        nextItem = document.forms[0].leftSide.length;
        document.forms[0].leftSide.options[nextItem] = listName; 
        document.forms[0].rightSide.options[rightCurName] = null;
    } else if (document.forms[0].rightSide.length <= 0) {
        alert("There are no more options on the right list")
    } else   
        window.alert("No option is selected on the right side");
}
/* ]]>*/
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="Stylesheet" type="text/css" />
</head>
<body>
<h2>This page will switch items between lists</h2>

<div align="center">
    <form action="">
        <table border="3">
            <tr>
                <th>Left List</th>
                <th>Click</th>
                <th>Right List</th>
            </tr>
            <tr>
                <td>
                    <select name="leftSide" size="6">
                        <option value="stephanie">Stephanie</option>
                        <option value="beatriz">Beatriz</option>
                        <option value="carol">Carol</option>
                    </select>
                </td>
                <td>
                    <input type="button" onclick="moveLeft()" name="leftButton" value="<<" /> <br />
                    <input type="button" onclick="moveRight()" name="rightButton" value=">>" />
                </td>
                <td>
                    <select name="rightSide" size="6">
                        <option value="evan">Evan</option>
                        <option value="david">David</option> 
                        <option value="mark">Mark</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2010

Вы пытаетесь получить свойства из свойства selectedIndex списка, которое является числом. Вы хотите получить его от theList.options[theList.selectedIndex].

EDIT: Кроме того, ваши переменные названы довольно запутанно. Попробуйте это: 

var list = document.forms[0].rightSide;
var index = list.selectedIndex;
var text = list.options[index].text;
var value = list.options[index].value;

И одна из самых удивительных вещей: две ваши функции в основном одинаковы. Передайте список источников и список целей в качестве параметров общей функции move().

0 голосов
/ 21 февраля 2010

Ясно, почему код так запутался. Вот функции:

Переместить влево: 

function moveLeft() {
var rightCurText = document.forms[0].rightSide.selectedIndex.text;
var rightCurValue = document.forms[0].rightSide.selectedIndex.value;
var rightCurName = document.forms[0].rightSide.selectedIndex;

if (rightCurName != -1) {
    var listName = new Option();
    listName.text = rightCurText;
    listName.value = rightCurValue;
    nextItem = document.forms[0].leftSide.length;
    document.forms[0].leftSide.options[nextItem] = listName; 
    document.forms[0].rightSide.options[rightCurName] = null;
}
else if (document.forms[0].rightSide.length <= 0) {
    alert("There are no more options on the right list")
}
else   
    window.alert("No option is selected on the right side");
}

Переместить вправо: 

function moveRight() {
var leftCurText = document.forms[0].leftSide.selectedIndex.text;
var leftCurValue = document.forms[0].leftSide.selectedIndex.value;
var leftCurName = document.forms[0].leftSide.selectedIndex;

if (leftCurName != -1) {        
    var listName = new Option();
    listName.text = leftCurText;
    listName.value = leftCurValue;
    nextItem = document.forms[0].rightSide.length;
    document.forms[0].rightSide.options[nextItem] = listName;
    document.forms[0].leftSide.options[leftCurName] = null;
}
else if (document.forms[0].leftSide.length <= 0) {
    window.alert("There are no more options in the left list")
}
else
   window.alert("No option is selected on the left side");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...