Вход

Просмотр полной версии : Показать скрытые блоки когда value равен определенному значению

maraterl
23.09.2015, 15:20
Добрый день. Имеется выпадающий список с таким кодом:

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
sortarray
23.09.2015, 15:41
равен определенному значению
Какому "определенному"? Кстати, для твоего кода вообще скрытые блоки не особо нужны, можно вот так сделать

<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>
maraterl
23.09.2015, 15:47
Какому "определенному"? value = от 1 до 3. Мне нужно именно вывести через блоки. Потому что там большой объем текста. Например выбрал <option value="1">Короткий текст</option> и он показал это:

Эйнштейн - автор более 300 научных работ по физике, а также около 150 книг и статей в области истории и философии науки, публицистики и др. Он разработал несколько значительных физических теорий:
- Общая теория относительности (1907—1916);
- Квантовая теория фотоэффекта;
Lemme
23.09.2015, 16:16
<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>
maraterl
23.09.2015, 16:24
Сейчас сижу с телефона, возможности нет проверить. data-value="длинный текст 2"> поддерживает HTML теги?
Lemme
23.09.2015, 16:45
поддерживает HTML теги?

Вообще да, но, я не думаю, что нормально пихать в data* атрибуты 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>
maraterl
23.09.2015, 16:50
Конечно не нормально:yes: но изначально я и создал div с нужными мне стилями и классами, что бы через скрипт показать при выборе селекта
maraterl
23.09.2015, 19:07
Код который вы написали, работает хорошо. Но когда я добавляю еще несколько 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/
Lemme
23.09.2015, 19:46
выводятся по порядку
забыл про value ;D

Замените это
this.selectedIndex

на это
this.value
maraterl
23.09.2015, 20:10
Все, спасибо огромное. Работает как надо:thanks: