Помогите написать один скрипт
Нужно написать скрипт простой фильтрации, вот некий "пример": :write:
<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 Как такое можно реализовать? :help: |
Для начала id не может повторяться впределах одного документа, он должен быть уникален.
|
но можно следующие))
<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> |
Мне главное сам js...
|
Можно так, как самый простой вариант:
<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>
|
danik.js,
Большое спс :victory: А возможно как нить увеличить количество 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. |
| Часовой пояс GMT +3, время: 23:35. |