Помогите написать один скрипт
Нужно написать скрипт простой фильтрации, вот некий "пример": :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, время: 06:26. |