Задать вопрос
@Zorgios
javascript

Как реализовать добавление пункта SELECT'a в список по клику на этот пункт?

Имеется список и SELECT с несколькими пунктами:
https://jsfiddle.net/re6dafLg/8/

<!DOCTYPE html>
<html>
 <body>
  <p>
   <select name="select" size="6" multiple>
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
    <option>Значение 4</option>
    <option>Значение 5</option>
    <option>Значение 6</option>
   </select>
  </p>
  <div id="testId" class="testClass">
  <ul class="testClassUl">
    <li class="testClassLi">Значение 1</li>
    <li class="testClassLi">Значение 2</li>
    <li class="testClassLi">Значение 3</li>
  </ul>
  </div>
 </body>
</html>


Как средствами JS можно реализовать добавление пункта из SELECT в список?
  • Вопрос задан
  • 45 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
@writer_2159
Жуть... просто жуть... 
const select = document.querySelector('select');
const ul = document.querySelector('.testClassUl');

select.addEventListener('change',()=>{
	const selectedOptions = select.querySelectorAll('option:checked')
    
  ul.innerHTML  = "";
  
  for(const  option of selectedOptions){
    var li = document.createElement("li");
    li.classList.add('testClassLi');
    li.innerText = option.innerText;
    ul.appendChild(li);
  }
 
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать HLTV HUD для стрима CS 1.6
25 апр. 2024, в 08:02
2500 руб./за проект
Вычислить размер объекта по карте глубин
25 апр. 2024, в 07:37
5000 руб./за проект
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Ещё заказы