Форум

Pasterrio · #1 (**permalink**) 23.05.2014, 11:36

Господа, помогите пожалуйста с кодом.
Суть в чем: у меня имеется страница, на которой осуществляется двойная фильтрация блоков div.
Появилась задача прикрутить к этой странице еще блоков, но при одном условии:
эти блоки должны появляться только при конкретных значениях фильтра, в остальное время они должны быть скрыты. Даже когда на фильтре стоит значение отображения всех блоков.
Код следующий:

<script type="text/javascript">
function filterDivs(){
var a1 = '.'+$('#menu option.paramA:selected').attr('value');
var b1 = '.'+$('#menu option.paramB:selected').attr('value');
if(a1=='.'){a1='';}
if(b1=='.'){b1='';}

$('#filterList div').show().hide(); 
$('#filterList div'+a1+b1).show(); 

}
$(document).ready(function(){
filterDivs();
$('#menu select').change(function(){
filterDivs();
});
});
</script>

<div>
<select name="paramA" size="1">
<option class="paramA" name="paramA" value="">Все А</option>
<option class="paramA" name="paramA" value="a1">Значение А1</option>
<option class="paramA" name="paramA" value="a2">Значение А2</option>
</select> 
<div class="clr"></div>
</div>

<div>
<select name="paramB" size="1">
<option class="paramB" name="paramB" value="">Все B</option>
<option class="paramB" name="paramB" value="b1">Значение B1</option>
<option class="paramB" name="paramB" value="b2">Значение B2</option>
</select> 
<div class="clr"></div>
</div>

<div id="filterList">
<div class="a1 b1">
Значение 1
</div>

<div class="a1 b2">
Значение 2
</div>

<div class="a2 b1">
Значение 3
</div>

<div class="a2 b2">
Значение 4
</div>
</div>

Задача прикрутить блок, формата

<div class="a1 b1">
Описание
</div>

который бы скрыт при выборе показа всех блоков, но при этом отображался бы при вызове параметра b1

рони · #2 (**permalink**) 23.05.2014, 11:50

Pasterrio,
Вопрос то в чём? и зачем checked в option ?

Pasterrio · #3 (**permalink**) 23.05.2014, 12:03

первый option для проверки и вывода полностью всех блоков.

Вопос в том, чтобы сделать дополнительные блоки, которые в обычном состоянии скрыты, при выводе всех блоков тоже были бы скрыты, а выводились только при вызове конкретного value, для каждого блока свой.

Иными словами у меня происходит фильтрация блоков, и надо, чтобы после этой фильтрации появлялся дополнительный блок, который бы пояснял - что отфильтровано.

рони · #4 (**permalink**) 23.05.2014, 12:19

Pasterrio,
сделай те ваши дополнительнные блоки -- опишите условия их появления/исчезновения и посмотрите какие атрибуты могут быть в optionhttp://htmlbook.ru/html/option
когда вы чётко сформулируите вопрос - больше шансов что вам помогут

Pasterrio · #5 (**permalink**) 23.05.2014, 12:31

Спасибо, попробовал подредактировать, чтобы было понятнее.

рони · #6 (**permalink**) 23.05.2014, 13:14

Pasterrio,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
   <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function ()
  	  {
  	    function filterDivs(){
var aValue = $('select[name="paramA"]').val();
var bValue = $('select[name="paramB"]').val()
$('#filterList div').hide();
$('#filterList div'+aValue+bValue).show();
$('.b1').not('.a1, .a2')[bValue == '.b1'? 'show':'hide']()
}
filterDivs();
$('select').change(function(){
filterDivs();
});
  	  }
  	)
  </script>

</head>

<body>
<div>
<select name="paramA" size="1">
<option class="paramA" name="paramA" value="">Все А</option>
<option class="paramA" name="paramA" value=".a1">Значение А1</option>
<option class="paramA" name="paramA" value=".a2">Значение А2</option>
</select>
<div class="clr"></div>
</div>

<div>
<select name="paramB" size="1">
<option class="paramB" name="paramB" value="">Все B</option>
<option class="paramB" name="paramB" value=".b1">Значение B1</option>
<option class="paramB" name="paramB" value=".b2">Значение B2</option>
</select>
<div class="clr"></div>
</div>

<div id="filterList">
<div class="a1 b1">
Значение 1
</div>

<div class="a1 b2">
Значение 2
</div>

<div class="a2 b1">
Значение 3
</div>

<div class="a2 b2">
Значение 4
</div>



</div>
<div class="b1">
Описание
</div>

</body>

</html>

Pasterrio · #7 (**permalink**) 23.05.2014, 13:19

Спасибо огромное. То, что требуется!

Форум

Справочник

Discord чат

Курсы javascript