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

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

Вот мой код:

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

источник

2010-02-21 Josh

Вы пытаетесь получить свойства из 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().

источник

2010-02-21 19:59:52 janmoesen

спасибо. Прошел и зафиксировал его. – Josh

ИДК почему код так перепутались. Вот функции:

Move Left:

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"); 
}

Move Right:

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"); 
}

источник

2010-02-21 19:44:35 Josh

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

ответ

Смежные вопросы