Вход

Просмотр полной версии : отображение содержимого в зависимости от выбранного option

Anushki
24.12.2017, 15:38
Добрый день. Помогите пожалуйста =)
Нужно чтобы отображение div'a происходило без взаимодействия с value. Так как value должен передавать определенное значение.

<select id="sel">
<option value="">-- Выбрать --</option>
<option value="Белый">Белый</option>
<option value="Зеленый">Зеленый</option>
<option value="Красный">Красный</option>
</select>

<div id="">Белый</div>
<div id="">Зеленый</div>
<div id="">Красный</div>

js?

=) плииз
рони
24.12.2017, 15:56
Anushki,
использовать value ничего не мешает!!! но если очень хочется без тогда есть индекс.
и куча примеров на форуме
Anushki
24.12.2017, 15:57
Anushki,
использовать value ничего не мешает!!! но если очень хочется без тогда есть индекс.
и куча примеров на форуме

Рони а можешь показать пример на индексах и value ?
рони
24.12.2017, 16:01
Anushki,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[data-id]{
display: none;
}
[data-id].open {
display: block;
}

</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
var sel = document.querySelector('#sel'),
div = document.querySelectorAll('[data-id]');
sel.addEventListener('change', function() {
[].forEach.call( div, function(el) {
el.dataset.id == sel.value ?
el.classList.add('open') :
el.classList.remove('open');
});
});
});
</script>
</head>

<body>
<select id="sel">
<option value="">-- Выбрать --</option>
<option value="Белый">Белый</option>
<option value="Зеленый">Зеленый</option>
<option value="Красный">Красный</option>
</select>

<div data-id="Белый">Белый</div>
<div data-id="Зеленый">Зеленый</div>
<div data-id="Красный">Красный</div>


</body>
</html>
Anushki
24.12.2017, 16:06
Как всегда шедевр) спасибо Рони) ты крут
рони
24.12.2017, 16:08
Anushki,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item{
display: none;
}
.item.open {
display: block;
}

</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
var sel = document.querySelector('#sel'),
div = document.querySelectorAll('.item');
sel.addEventListener('change', function() {
[].forEach.call( div, function(el, i) {
i == sel.selectedIndex - 1?
el.classList.add('open') :
el.classList.remove('open');
});
});
});
</script>
</head>

<body>
<select id="sel">
<option value="">-- Выбрать --</option>
<option value="Белый">Белый</option>
<option value="Зеленый">Зеленый</option>
<option value="Красный">Красный</option>
</select>

<div class="item">Белый</div>
<div class="item">Зеленый</div>
<div class="item">Красный</div>


</body>
</html>
Anushki
24.12.2017, 16:09
Anushki,

http://jsfiddle.net/6Lohufav/31/


Рони выбери зеленый цвет.. там ошибка
Anushki
24.12.2017, 16:11
а все) ясно)
Anushki
24.12.2017, 16:11
http://jsfiddle.net/6Lohufav/32/
Anushki
24.12.2017, 16:12
все ништяк) спасибо =)
рони
24.12.2017, 16:30
Рони выбери зеленый цвет.. там ошибка
data-id исправь, пост №4 строка 42
рони
24.12.2017, 16:36
и куча примеров на форуме
:)
https://javascript.ru/forum/events/70659-otobrazhenie-ehlementa-v-zavisimosti-ot-vybora-select.html#post465186