Показать скрытые блоки когда value равен определенному значению
Добрый день. Имеется выпадающий список с таким кодом:
function change()
{
var id=0;
block_id='block_'+id;
s=document.getElementById('select-4');
d=s.options[s.selectedIndex].text;;
next='block_'+d;
v=document.getElementById(next).innerHTML;
document.getElementById(block_id).innerHTML='<div id="'+block_id+'">'+v+'</div>';
}
<select name="vote" class="form-select" id="select-4" onchange="change()">
<option value="0">Выбрать</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="block_0"></div>
<div id="block_1" style="visibility: hidden;">Текст 1</div>
<div id="block_2" style="visibility: hidden;">Текст 2</div>
<div id="block_3" style="visibility: hidden;">Текст 3</div>
Как изменить скрипт, что бы скрытый текст выводился когда value равен определенному значению. Данный скрипт сейчас выводит текст, когда значение равен цифрам от 1 до 3 |
Цитата:
<html>
<head>
<meta charset="utf8">
</head>
<body>
<select id="s">
<option value="0">Выбрать</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="out">
<script>
s.onchange = function(){
id.innnerHTML = this.value
}
</script>
</body>
</html>
|
Цитата:
<option value="1">Короткий текст</option>и он показал это: Эйнштейн - автор более 300 научных работ по физике, а также около 150 книг и статей в области истории и философии науки, публицистики и др. Он разработал несколько значительных физических теорий: - Общая теория относительности (1907—1916); - Квантовая теория фотоэффекта; |
<select id="s">
<option value="0">Выбрать</option>
<option value="1" data-value="длинный текст 1">короткий текст 1</option>
<option value="2" data-value="длинный текст 2">короткий текст 1</option>
</select>
<div></div>
<script>
var s = document.getElementById('s'),
b = document.querySelector('div');
s.onchange = function() {
b.innerHTML = this[this.selectedIndex].getAttribute('data-value') || '';
}
</script>
|
Сейчас сижу с телефона, возможности нет проверить.
data-value="длинный текст 2">поддерживает HTML теги? |
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block {
display: none;
}
.block_active {
display: block;
}
</style>
</head>
<body>
<select id="s">
<option value="0">Выбрать</option>
<option value="1">короткий текст 1</option>
<option value="2">короткий текст 2</option>
</select>
<div id="b_1" class="block">длинный текст 1</div>
<div id="b_2" class="block">длинный текст 2</div>
<script>
document.getElementById('s').onchange = function() {
var block = document.getElementById('b_' + this.selectedIndex),
active = document.querySelector('.block_active');
if (active) {
active.classList.remove('block_active');
}
if (!block) {
return false;
}
block.classList.add('block_active');
}
</script>
</body>
</html>
|
Конечно не нормально:yes: но изначально я и создал div с нужными мне стилями и классами, что бы через скрипт показать при выборе селекта
|
Код который вы написали, работает хорошо. Но когда я добавляю еще несколько option'ов, например:
<select id="select-4"> <option value="0">Выбрать</option> <option value="1">короткий текст 1</option> <option value="2">короткий текст 2</option> <option value="1">короткий текст 1.1</option> </select> <div id="b_1" class="block"> Длинный текст для value="1" </div> <div id="b_2" class="block"> Длинный текст для value="2" </div> Текст для <option value="1">короткий текст 1.1</option>не выводится Поменял значение для value, но тексты в div выводятся по порядку, а не по значению value https://jsfiddle.net/939kh7ce/ https://jsfiddle.net/939kh7ce/1/ |
Цитата:
Замените это this.selectedIndex на это this.value |
Все, спасибо огромное. Работает как надо:thanks:
|
| Часовой пояс GMT +3, время: 14:28. |