WedX - журнал о программировании и компьютерных науках

Попытка переместить один параметр в другой список выбора

Я пробовал искать это, и все ответы выше моей головы, и они просто сбивают с толку и расстраивают меня... Все, что я пытаюсь сделать, это сделать вариант из выбранного левого списка, перейти к правому списку когда я нажимаю кнопку. Это скрипт, который я пытаюсь использовать, и он у меня не работает...

function moveRight() {
var selItem = document.forms[0].leftList.selectedIndex;

 if (selItem == -1) {
  window.alert("You must first select an item on the left side.")
 }

 else {
  var selText = document.forms[0].leftList[selItem].text;
  var selValue = document.forms[0].leftList[selItem].value;
  var nextItem = document.forms[0].rightList.length;

  document.forms[0].rightList[nextItem].text = selText;
  document.forms[0].rightList[nextItem].value = selValue;
 }
}

Любые мысли о том, как заставить это работать, не усложняя вопрос?

javascript
01.11.2013

  • не могли бы вы также поделиться фрагментом вашего html? было бы полезно увидеть разметку вашей формы. 01.11.2013
  • Трудно скопировать и вставить, так как я пишу с другого компьютера, но я приведу пример моего html... ‹select name = leftList size = 10› ‹option value = example›Example‹/option› ‹ /select› ‹тип ввода=значение кнопки=>> onclick = moveRight(); /› 01.11.2013

Ответы:


1

В вашем коде было три проблемы:

  1. Используйте document.getElementById вместо document.forms[0].leftList
  2. Используйте cloneNode, removeChild и appendChild для перемещения элементов.
  3. Я не видел места, где вы вызывали свою функцию moveRight. Пришлось добавить событие onchange

Образец кода:

function moveRight() {
    var leftlist = document.getElementById("leftList");
    var selItem = leftlist.selectedIndex;

    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        var rightlist = document.getElementById("rightList");
        var newOption = leftlist[selItem].cloneNode(true);

        leftlist.removeChild(leftlist[selItem]);
        rightlist.appendChild(newOption);
    }
}

document.getElementById('leftList').onchange = moveRight;
01.11.2013
  • Я попробую, посмотрим, смогу ли я заставить это работать на меня, спасибо. Редактировать: Ну, после того, как я попробовал код таким образом и добавил соответствующие теги идентификатора в мой html, он, кажется, работает, большое спасибо! 01.11.2013

    • 2

    Используете ли вы одну из распространенных библиотек js (Mootools/jQuery)?
    Если нет, прочитайте здесь https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild В конце есть ссылка на то, как удалить элемент dom, и ссылка, которую я вам дал, как прикрепить элемент dom туда, где вам нужно.

    Ваше здоровье

    01.11.2013

    3

    Есть довольно много способов сделать то, что вы пытаетесь достичь. Я не знаю ваших требований, поэтому я старался, чтобы код был как можно ближе к тому, что вы пробовали.

    function moveRight() {
    var selItem = document.forms[0].leftList.selectedIndex;
    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        document.forms[0].rightList.add(document.forms[0].leftList[selItem], null);
    }
}

    Проверьте это на https://jsfiddle.net/Z8xRp/3/.

    01.11.2013

    4

    Я немного опоздал, но вот решение (переход между несколькими вариантами выбора), я просто изменил некоторые строки из более старого решения.

    демо: https://jsfiddle.net/rTxb8/

        function moveRight() {
    var selItem = document.forms[0].leftList.selectedIndex;
    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        document.forms[0].rightList.add(document.forms[0].leftList[selItem], null);
    }
}

function moveLeft() {
    var selItem = document.forms[0].rightList.selectedIndex;
    if (selItem == -1) {
        window.alert("You must first select an item on the left side.")
    } else {
        document.forms[0].leftList.add(document.forms[0].rightList[selItem], null);
    }
}
    24.04.2014
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]