Форум

andamurobl · #1 (**permalink**) 02.10.2017, 13:20

Добрый день.
Ситуация такова... Есть Nное количество дивов и 1 select над ними.
Select из себя представляет названия городов, по умолчанию "Все города". А сами блоки по сути относятся к определенному городу.

<select>
     <option>Все города</option>
     <option>Москва</option>
     <option>Казань</option>
     <option>Сочи</option>
</select>
<div>Инфо о Москве</div>
<div>Инфо о Казани</div>
<div>Инфо о Сочи</div>

Вопрос: как удобнее фильтровать отображение блоков в связи с выбором select'а? нужно ли задавать дополнительные атрибуты для блоков или достаточно обойтись id ?

(Была идея к каждому городу привязать функцию, которая задавала бы другим блокам display: none, но подозреваю, это обилие лишней писанины.)

j0hnik · #2 (**permalink**) 02.10.2017, 13:58

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select>
		<option>Все города</option>
		<option>Москва</option>
		<option>Казань</option>
		<option>Сочи</option>
	</select>
	<div>Инфо о Москве</div>
	<div>Инфо о Казани</div>
	<div>Инфо о Сочи</div>

	<script>
	var div = document.querySelectorAll('div');
		document.querySelector('select').onchange=function(){
			var n = this.selectedIndex;
			[].forEach.call(div, function(el, i){
				el.style.display = n && i !== n-1 ?  'none':'block';
			});
		};
	</script>
</body>
</html>

рони · #3 (**permalink**) 02.10.2017, 14:41

j0hnik,
строка 25 лишняя(зачем 2 раза менять стиль), достаточно сделать условие в строке 23

j0hnik · #4 (**permalink**) 02.10.2017, 14:58

ну ок. Поправлю

Dilettante_Pro · #5 (**permalink**) 02.10.2017, 15:10

Без привязки к последовательности размещения

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select>
		<option value="*">Все города</option>
		<option value="ms">Москва</option>
		<option value="kz">Казань</option>
		<option value="sc">Сочи</option>
	</select>
	<div id="kz">Инфо о Казани</div>
	<div id="sc">Инфо о Сочи</div>
        <div id="ms">Инфо о Москве</div>

	<script>
	var div = document.querySelectorAll('div');
		document.querySelector('select').onchange=function(){
			idSel = this.value;
			[].forEach.call(div, function(el){
				el.style.display=(idSel=="*"||idSel==el.id)?'block':'none';
			});
		};

	</script>
</body>
</html>

j0hnik · #6 (**permalink**) 02.10.2017, 15:56

Без привязки и без id и value (экспериментальный)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select>
		<option>Все города</option>
		<option>Москва</option>
		<option>Казань</option>
		<option>Сочи</option>
	</select>
	<div>Инфо о Москве</div>
	<div>Инфо о Казани</div>
	<div>Инфо о Сочи</div>

	<script>

		var div = document.querySelectorAll('div');
		document.querySelector('select').onchange=function(){
			var n = this.options[this.selectedIndex].textContent.slice(0, -2);
			[].forEach.call(div, function(el, i){
				el.style.display = el.textContent.match(n)||'Все горо'.match(n) ? 'block':'none';
			});
		};

	</script>
</body>
</html>

andamurobl · #7 (**permalink**) 03.10.2017, 16:14

Благодарю.

Форум

Справочник

Discord чат

Курсы javascript