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

StackOverflow https://stackoverflow.com/questions/2307193

Вопрос

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

Вот мой код:

<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>
Это было полезно?

Решение

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

РЕДАКТИРОВАТЬ: Также ваши переменные называются довольно запутанно. Попробуй это:

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

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

Другие советы

Idk, почему код так испорчен. Вот функции:

Двигай влево:

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");
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top