Цитата:
|
А возможно как нить увеличить количество 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.