Копирование списка выбора/опций в другой список выбора/опций

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

var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++) {
  toSelect.appendChild(fromSelect.options[i]);
}

<div>
  <select id = "Sel1">
    <option value = "1">06/01/24</option>
    <option value = "2">06/02/24</option>
    <option value = "3">06/03/24</option>
    <option value = "4">06/04/24</option>
    <option value = "5">06/05/24</option>
    <option value = "6">06/06/24</option>
    <option value = "7">06/07/24</option>
  </select>
  <select id = "Sel2"></select>
</div>

javascript html

05.06.2024 03:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

Вам нужно использовать cloneNode, чтобы создать копию исходных параметров выбора.

var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++) {
  toSelect.appendChild(fromSelect.options[i].cloneNode(true));
}

<div>
  <select id = "Sel1">
    <option value = "1">06/01/24</option>
    <option value = "2">06/02/24</option>
    <option value = "3">06/03/24</option>
    <option value = "4">06/04/24</option>
    <option value = "5">06/05/24</option>
    <option value = "6">06/06/24</option>
    <option value = "7">06/07/24</option>
  </select>
  <select id = "Sel2"></select>
</div>

05.06.2024 03:34

Ответ принят как подходящий

Я думаю, что вы здесь ожидаете .appendChild вставки дочерних узлов (fromSelect.options[i]) в некий «список дочерних узлов». Это сбивает с толку: почему узлы загадочным образом исчезают?

Когда вы используете .appendChild, на самом деле происходит то, что родительский узел дочернего узла устанавливается в родительский узел. Другими словами, parent.appendChild(child) является инверсией child.setParent(parent). Решением этой проблемы является клонирование узла перед установкой дочернего узла родительского узла.

var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++)
{
    var clone = fromSelect.options[i].cloneNode(true);
    toSelect.appendChild(clone);
}

05.06.2024 03:34

здесь нет необходимости в цикле. если вам нужны два одинаковых параметра, вы можете передать внутренний HTML-код первого поля выбора второму.

<script>
    var fromSelect = document.getElementById("Sel1");
    var toSelect = document.getElementById("Sel2");
    toSelect.innerHTML = fromSelect.innerHTML
</script>

05.06.2024 03:35

Вам просто нужно просмотреть параметры в обратном порядке:

for (var i = fromSelect.options.length - 1; i >= 0; i--)

Вы можете запустить фрагмент, чтобы увидеть, как он работает:

<div>
<select id = "Sel1">
  <option value = "1">06/01/24</option>
  <option value = "2">06/02/24</option>
  <option value = "3">06/03/24</option>
  <option value = "4">06/04/24</option>
  <option value = "5">06/05/24</option>
  <option value = "6">06/06/24</option>
  <option value = "7">06/07/24</option>
</select>
<select id = "Sel2"></select>
</div>


<script>
var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
// for (var i = 0; i < fromSelect.options.length; i++)
for (var i = fromSelect.options.length - 1; i >= 0; i--)
{
  toSelect.appendChild(fromSelect.options[i]);
}
</script>

05.06.2024 03:36

Элемент select немного особенный по сравнению с другими элементами HTML, поскольку у него есть список его параметров (свойство options ) и метод add() . Вы можете использовать их в сочетании с методом cloneNode(), чтобы скопировать все параметры.

const form = document.forms.form01;

[...form.Sel1.options].forEach(option => {
  let clone = option.cloneNode(true);
  form.Sel2.add(clone);
});

// more or less a one-liner:
//[...form.Sel1.options].forEach(opt => form.Sel2.add(opt.cloneNode(true)));

<form name = "form01">
  <select name = "Sel1">
    <option value = "1">06/01/24</option>
    <option value = "2">06/02/24</option>
    <option value = "3">06/03/24</option>
    <option value = "4">06/04/24</option>
    <option value = "5">06/05/24</option>
    <option value = "6">06/06/24</option>
    <option value = "7">06/07/24</option>
  </select>
  <select name = "Sel2"></select>
</form>

05.06.2024 10:18

Вы должны добавить все параметры от formSelect до toSelect:

 var fromSelect = document.getElementById("Sel1");
        var toSelect = document.getElementById("Sel2");
        toSelect.innerHTML = "";

        for (var i = 0; i < fromSelect.options.length; i++) {
            var option = fromSelect.options[i].cloneNode(true);
            toSelect.appendChild(option);
        }

 <div>
        <select id = "Sel1">
            <option value = "1">06/01/24</option>
            <option value = "2">06/02/24</option>
            <option value = "3">06/03/24</option>
            <option value = "4">06/04/24</option>
            <option value = "5">06/05/24</option>
            <option value = "6">06/06/24</option>
            <option value = "7">06/07/24</option>
        </select>
    <select id = "Sel2"></select>
</div>

05.06.2024 10:20

Почему бы не просто это?

Sel2.innerHTML = Sel1.innerHTML;

<div>
  <select id = "Sel1">
    <option value = "1">06/01/24</option>
    <option value = "2">06/02/24</option>
    <option value = "3">06/03/24</option>
    <option value = "4">06/04/24</option>
    <option value = "5">06/05/24</option>
    <option value = "6">06/06/24</option>
    <option value = "7">06/07/24</option>
  </select>
  <select id = "Sel2"></select>
</div>

05.06.2024 11:43

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

Извлечение текста и таблиц из PDF и Word

Сжимать div по вертикали, когда контента меньше

Какой формат видео использовать для поддержки прозрачного видео в веб-приложениях для настольных компьютеров и мобильных устройств, поддерживающих все браузеры (настольные и мобильные устройства)

Активное состояние элемента меню

Высота сетки изображения, выходящей за пределы сетки

CSS: как позволить шрифту дочерних элементов вернуться к семейству шрифтов его родительского элемента?

Модальное слайд-шоу для нескольких изображений на странице

Кнопки управления CSS

Можно ли соблюдать соотношение сторон адаптивного изображения с начальной шириной и высотой?

Как исправить раскрывающееся меню, появляющееся за закрепленным столбцом в таблице

Копирование списка выбора/опций в другой список выбора/опций

Ответы 7

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

Похожие вопросы