Показать сообщение отдельно
  #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.
Ответить с цитированием