отображение содержимого в зависимости от выбранного option
Добрый день. Помогите пожалуйста =)
Нужно чтобы отображение 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? =) плииз |
Anushki,
использовать value ничего не мешает!!! но если очень хочется без тогда есть индекс. и куча примеров на форуме |
Цитата:
|
открывашка селектом value
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>
|
Как всегда шедевр) спасибо Рони) ты крут
|
открывашка селектом selectedIndex
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>
|
Цитата:
|
а все) ясно)
|
|
все ништяк) спасибо =)
|
| Часовой пояс GMT +3, время: 12:17. |