Форум

maraterl · #1 (**permalink**) 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 · #2 (**permalink**) 23.09.2015, 15:41

Сообщение от maraterl

равен определенному значению

Какому "определенному"? Кстати, для твоего кода вообще скрытые блоки не особо нужны, можно вот так сделать

<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 · #3 (**permalink**) 23.09.2015, 15:47

Цитата:

Какому "определенному"?

value = от 1 до 3. Мне нужно именно вывести через блоки. Потому что там большой объем текста. Например выбрал

<option value="1">Короткий текст</option>

и он показал это:

Эйнштейн - автор более 300 научных работ по физике, а также около 150 книг и статей в области истории и философии науки, публицистики и др. Он разработал несколько значительных физических теорий:
- Общая теория относительности (1907—1916);
- Квантовая теория фотоэффекта;

Lemme · #4 (**permalink**) 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 · #5 (**permalink**) 23.09.2015, 16:24

Сейчас сижу с телефона, возможности нет проверить.

data-value="длинный текст 2">

поддерживает HTML теги?

Lemme · #6 (**permalink**) 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 · #7 (**permalink**) 23.09.2015, 16:50

Конечно не нормально

но изначально я и создал div с нужными мне стилями и классами, что бы через скрипт показать при выборе селекта

maraterl · #8 (**permalink**) 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 · #9 (**permalink**) 23.09.2015, 19:46

Цитата:

выводятся по порядку

забыл про value ;D

Замените это

this.selectedIndex

на это

this.value

maraterl · #10 (**permalink**) 23.09.2015, 20:10

Все, спасибо огромное. Работает как надо

Форум

Справочник

Discord чат

Курсы javascript