Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2013, 21:33
Интересующийся
Отправить личное сообщение для Pikener Посмотреть профиль Найти все сообщения от Pikener
 
Регистрация: 27.07.2012
Сообщений: 15

Помогите написать один скрипт
Нужно написать скрипт простой фильтрации, вот некий "пример":
<select>
<option selected></option>
<option id="1">пункт i</option>
<option id="2">пункт b</option>
<option id="3">пункт c</option>
</select>
<select>
<option selected></option>
<option class="1">пункт а</option>
<option class="2">пункт б</option>
<option class="3">пункт в</option>
</select>
<br />
<div id="1" class="1">текст1 текст1 текст1 текст1</div>
<br />
<div id="2" class="2">текст2 текст2 текст2 текст2</div>
<br />
<div id="3" class="3">текст3 текст3 текст3 текст3</div>
<br />
<div id="1" class="3">текст4 текст4 текст4 текст4</div>
<br />
<div id="2" class="3">текст5 текст5 текст5 текст5</div>
<br />
<div id="3" class="1">текст6 текст6 текст6 текст6</div>
<br />
<div id="1" class="2">текст7 текст7 текст7 текст7</div>

И так, чтобы при выборе определённого(ых) пункта(ов), остовались только те дивы, которые удовлетворяют значениям id и class

Т.е. если выбрать пункт b и пункт в то останется только:
текст5 текст5 текст5 текст5

Или если выбрать исключительно пункт c то останется только:
текст3 текст3 текст3 текст3
текст6 текст6 текст6 текст6

Как такое можно реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2013, 22:21
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Для начала id не может повторяться впределах одного документа, он должен быть уникален.
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2013, 22:30
Интересующийся
Отправить личное сообщение для nurik2120 Посмотреть профиль Найти все сообщения от nurik2120
 
Регистрация: 18.02.2013
Сообщений: 22

но можно следующие))

<div class="a 1">текст1 текст1 текст1 текст1</div>
<br />
<div class="b 2">текст2 текст2 текст2 текст2</div>
<br />
<div class="c 3">текст3 текст3 текст3 текст3</div>
<br />
<div class="a 3">текст4 текст4 текст4 текст4</div>
<br />
<div" class="b 3">текст5 текст5 текст5 текст5</div>
<br />
<div class="c 1">текст6 текст6 текст6 текст6</div>
<br />
<div class="a 2">текст7 текст7 текст7 текст7</div>
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2013, 23:12
Интересующийся
Отправить личное сообщение для Pikener Посмотреть профиль Найти все сообщения от Pikener
 
Регистрация: 27.07.2012
Сообщений: 15

Мне главное сам js...
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2013, 05:17
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Можно так, как самый простой вариант:
<select>
    <option value="" selected></option>
    <option value="a">пункт i</option>
    <option value="b">пункт b</option>
    <option value="c">пункт c</option>
</select>
<select>
    <option value="" selected></option>
    <option value="1">пункт а</option>
    <option value="2">пункт б</option>
    <option value="3">пункт в</option>
</select>

<div id="items">
    <div class="a 1">текст1 текст1 текст1 текст1</div>
    <div class="b 2">текст2 текст2 текст2 текст2</div>
    <div class="c 3">текст3 текст3 текст3 текст3</div>
    <div class="a 3">текст4 текст4 текст4 текст4</div>
    <div class="b 3">текст5 текст5 текст5 текст5</div>
    <div class="c 1">текст6 текст6 текст6 текст6</div>
    <div class="a 2">текст7 текст7 текст7 текст7</div>
</div>
<script>
(function(){
    var selects = document.getElementsByTagName('select');
    var items = document.getElementById('items').children;
    function filter(a, b) {
        var i, classes, matches;
        for (i = 0; i < items.length; i++) {
            classes = items[i].className.split(' ');
            matches = (!a || classes[0] == a) && (!b || classes[1] == b)
            items[i].style.display = matches ? '' : 'none';
        }
    }
    selects[0].onchange = selects[1].onchange = function() {
        filter(selects[0].value, selects[1].value);
    }
})()
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2013, 07:24
Интересующийся
Отправить личное сообщение для Pikener Посмотреть профиль Найти все сообщения от Pikener
 
Регистрация: 27.07.2012
Сообщений: 15

danik.js,
Большое спс
А возможно как нить увеличить количество select?
Ответить с цитированием
  #7 (permalink)  
Старый 03.04.2013, 19:30
Интересующийся
Отправить личное сообщение для vostok Посмотреть профиль Найти все сообщения от vostok
 
Регистрация: 19.11.2012
Сообщений: 18

Цитата:
А возможно как нить увеличить количество select?
<form>
Я покупаю:<br />
<select>
    <option value="" selected></option>
    <option value="car">Машина</option>
    <option value="moto">Мотоцикл</option>
    <option value="velo">Велосипед</option>
</select>
<br />еду в:<br />
<select>
    <option value="" selected></option>
    <option value="pizza">Ресторан</option>
    <option value="school">Школа</option>
    <option value="home">Домой</option>
</select>
<br />с:<br />
<select>
    <option value="" selected></option>
    <option value="girl">Девушка</option>
    <option value="frends">Друзья</option>
    <option value="yaga">Баба-Яга</option>
</select>
</form>

<div id="items">
    <div class="car girl pizza">Я покупаю машину, и еду с девушкой, в ресторан</div>
    <div class="car girl school">Я покупаю машину, и еду с девушкой, в школу</div>
    <div class="car girl home">Я покупаю машину, и еду с девушкой, домой</div>
    <div class="car frends pizza">Я покупаю машину, и еду с друзьями, в ресторан</div>
    <div class="car frends school">Я покупаю машину, и еду с друзьями, в школу</div>
    <div class="car frends home">Я покупаю машину, и еду с друзьями, домой</div>
    <div class="car yaga pizza">Я покупаю машину, и еду с Бабой-Ягой, в ресторан</div>
    <div class="car yaga school">Я покупаю машину, и еду с Бабой-Ягой, в школу</div>
    <div class="car yaga home">Я покупаю машину, и еду с Бабой-Ягой, домой</div>
    <div class="moto girl pizza">Я покупаю мотоцикл, и еду с девушкой, в ресторан</div>
    <div class="moto girl school">Я покупаю мотоцикл, и еду с девушкой, в школу</div>
    <div class="moto girl home">Я покупаю мотоцикл, и еду с девушкой, домой</div>
    <div class="moto frends pizza">Я покупаю мотоцикл, и еду с друзьями, в ресторан</div>
    <div class="moto frends school">Я покупаю мотоцикл, и еду с друзьями, в школу</div>
    <div class="moto frends home">Я покупаю мотоцикл, и еду с друзьями, домой</div>
    <div class="moto yaga pizza">Я покупаю мотоцикл, и еду с Бабой-Ягой, в ресторан</div>
    <div class="moto yaga school">Я покупаю мотоцикл, и еду с Бабой-Ягой, в школу</div>
    <div class="moto yaga home">Я покупаю мотоцикл, и еду с Бабой-Ягой, домой</div>
    <div class="velo girl pizza">Я покупаю велосипед, и еду с девушкой, в ресторан</div>
    <div class="velo girl school">Я покупаю велосипед, и еду с девушкой, в школу</div>
    <div class="velo girl home">Я покупаю велосипед, и еду с девушкой, домой</div>
    <div class="velo frends pizza">Я покупаю велосипед, и еду с друзьями, в ресторан</div>
    <div class="velo frends school">Я покупаю велосипед, и еду с друзьями, в школу</div>
    <div class="velo frends home">Я покупаю велосипед, и еду с друзьями, домой</div>
    <div class="velo yaga pizza">Я покупаю велосипед, и еду с Бабой-Ягой, в ресторан</div>
    <div class="velo yaga school">Я покупаю велосипед, и еду с Бабой-Ягой, в школу</div>
    <div class="velo yaga home">Я покупаю велосипед, и еду с Бабой-Ягой, домой</div>
</div>
<script>
(function(){
    var form = document.getElementsByTagName('form')[0];
    var selects = form.getElementsByTagName('select');
    var items = document.getElementById('items').children;
		
	function filter(selects) {
		for (var i = 0; i < items.length; i++)
			items[i].style.display = (hasMatch(selects, items[i]) ? '' : 'none');
	}
	
	function hasMatch(selects, item) {
		for(var j = 0; j < selects.length; j+=1)
			if(!hasClass(item, selects[j].value) && selects[j].value != '')
				return false;
		return true;
	}
	
	function hasClass(el, cls) {
	  for (var c = el.className.split(' '),i=c.length-1; i>=0; i--)
			if (c[i] == cls) return true;
	  return false;
	}
	
	form.onchange = function(event) {
		if(event.target.tagName != 'SELECT') return false;
		filter(selects);
	}
})()
</script>


так или убрав эту строку из условия:
&& selects[j].value != ''

Надо еще кроссбраузерность добавить с event.

Последний раз редактировалось vostok, 03.04.2013 в 19:44.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите написать постой скрипт на Jquery. wack jQuery 13 21.10.2012 21:41
Помогите пожалуйста правильно написать скрипт raffx Events/DOM/Window 17 16.10.2012 20:31
Нужно написать Java скрипт grim111 Работа 1 26.10.2011 23:38
Помогите написать скрипт для корзины Deep Элементы интерфейса 1 19.06.2010 14:46
Помогите настроить скрипт раскрывающегося меню melomanfm Работа 6 10.08.2009 01:21