Вывод данных из списка

@Шалун · Регистрация: 27.02.2017

Author24 — интернет-сервис помощи студентам

Как сделать, чтобы при выборе из выпадающего списка (<select>) при нажатии на выбранный <option> вывелись нужные данные? В списке этих данных нет, но при нажатии на <option> они выводятся
Помогите, пожалуйста

@Qwerty_Wasd · 30.06.2018, 21:35

Шалун, а куда они выводится должны? У вас уже подготовлена верстка? Или мы можем пофантазировать?

@Шалун · 30.06.2018, 21:36 **[ТС]**

Qwerty_Wasd, можно пофантазировать. Просто хочу понять принцип работы

@Qwerty_Wasd · 30.06.2018, 22:18

Шалун, ну например - https://codepen.io/qwerty_wasd/pen/YvBwJy

HTML5

<select id="idSelect">
  <option>...</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<div class="printInf">
  <div class="blockInf">one</div>
  <div class="blockInf">two</div>
  <div class="blockInf">three</div>
</div>

CSS

1	.blockInf{display:none}

Javascript

let selVariant=document.getElementById('idSelect'),
    blockInf=document.getElementsByClassName('blockInf');
selVariant.addEventListener('change',e=>{  
  if (e.selectedIndex==0) [...blockInf].forEach(el=>el.style.display='none');
  [...blockInf].forEach((el,i)=>{
    (selVariant.options[i+1].selected) ? el.style.display='block' : el.style.display='none';
  })
});

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
		1
	Вывод данных из списка 30.06.2018, 21:17. Показов 1328. Ответов 3 Метки нет (Все метки) Как сделать, чтобы при выборе из выпадающего списка (<select>) при нажатии на выбранный <option> вывелись нужные данные? В списке этих данных нет, но при нажатии на <option> они выводятся Помогите, пожалуйста 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	30.06.2018, 21:35	2
	Шалун, а куда они выводится должны? У вас уже подготовлена верстка? Или мы можем пофантазировать? 1

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	30.06.2018, 21:36 [ТС]	3
	Qwerty_Wasd, можно пофантазировать. Просто хочу понять принцип работы 0

	30.06.2018, 22:18

Опции темы

Вывод данных из списка

Решение