Фильтр выпадающего списка с использованием jquery или javascript

ProgramBox

Фильтр выпадающего списка с использованием jquery или javascript

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#javascript #jquery #filter

#javascript #jquery #Фильтр

Вопрос:

Мне было интересно, как создать выпадающее меню для фильтрации содержимого. Я искал в Интернете в течение 2 месяцев и еще не наткнулся на что-то или кого-то, кто мне поможет. Это ЕДИНСТВЕННАЯ проблема, с которой я сталкиваюсь с этим сайтом, который я создаю для своего босса. Я бы предпочел использовать jquery или javascript, если это возможно, но на данный момент я возьму все, что работает. Я действительно тоже не хочу просто ответа; пожалуйста, помогите мне узнать, как это работает.

Итак, в основном:

     <select>
    <optgroup label="Blue Buffalo">
    <option value="can">can</option>
    <option value="dry">dry</option>
    </optgroup>
    <optgroup label="Merrick">
    <option value="can">can</option>
    <option value="dry">dry</option>
    </optgroup>
    </select>

    <div>
    <div class="imgthmb"><a rel="lightbox" href="images/dog_blue_can_homestyle_beef.jpg">
    <img class="imgthumb" src="images/dog_blue_can_homestyle_beef_thmb.png" /></a>
    Blue Buffalo<br />
    Canned Dog Food<br />
    Homestyle<br />
    beef
    </div>
    </div>

    <div>
    <div class="imgthmb"><a rel="lightbox" href="images/dog_merrick_can_96_tripe.jpg">
    <img class="imgthumb" src="images/dog_merrick_can_96_tripe_thmb.png" /></a>
    Merrick<br />
    Canned Dog Food<br />
    96%<br />
    tripe
    </div>
    </div>

Пользователи смогут выбирать из бренда, только консервированные продукты этого бренда или только сухие продукты этого бренда. Когда пользователь делает выбор из выпадающего меню, останутся только изображения и относительный текст, равные значению параметра, а остальные будут «скрыты».

Вот черновик сайта. Как вы можете видеть, клиентам приходится иметь дело с большим количеством проблем без фильтра:

http://ssalinas5.mydevryportfolio.com/shadow/shadow/all4pets_dogs.html

Любая помощь вообще очень ценится. Я рву на себе волосы.

ОБНОВЛЕНИЕ 6/30: итак, я пробую все ваши предложения, и ничего не работает. Я почти уверен, что понимаю HTML-часть, но я дизайнер, а не программист, я вообще не понимаю части JQUERY. Кто-нибудь хочет уточнить и научить меня этим частям?

1. Поместите свою информацию в JSON файл. Используйте Handlebars или аналогичный для создания шаблонов. Используйте JQuery ‘s AJAX для чтения файла и фильтрации содержимого.

2. Не имеет отношения к вашему вопросу, но обратите внимание, что вы используете функции jQuery, не загрузив библиотеку. Добавьте a <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> перед $(document).ready функцией.

3. @ChadHedgcock Вы говорите о коде, который начинается с: «<script> $ (document). ready(function () {$(‘.all’).show();…» это было в заголовке? Это осталось от одной из моих многочисленных попыток решить эту проблему. Я знаю, как кодировать дизайн и базовые функции, а не что-то продвинутое. Мой босс все еще просил меня создать веб-сайт, поэтому я стараюсь изо всех сил. Я все же оценил заметки!

4. Я не вижу никаких зеленых флажков, так что, я так понимаю, вы все еще боретесь с этим?

5. Я все еще выясняю синтаксис в некоторых кодировках.

Ответ №1:

Для включения / отключения некоторых опций выбора вы можете использовать этот код

 $("#selectOne").change(function () {
//You have to add your logic here 
   $('#val4').prop('disabled', 'disabled');
// you can also add your code for image showing
});

Вот ссылка

Ответ №2:

Похоже, что все изображения продукта отображаются из жестко запрограммированной ссылки, и все они имеют один и тот же класс : imgthumbhold . Я предполагаю, что у вас нет базы данных, на которую ссылаются? Просто файлы изображений и жестко закодированные описания? Ничего страшного, вы все равно можете фильтровать то, что отображается с помощью CSS.

Прямо сейчас у вас есть одно имя класса в каждом DIV продукта.

   <div class="imgthumbhold">
    <a href="images/dog_blue_can_stew_beef.jpg" rel="lightbox" title="amp;#8226;Blue Buffalo<br />amp;#8226;Stew beef canned<br />amp;#8226;In Store Sizes: 12.5oz"><img src="images/dog_blue_can_stew_beef_thmb.png" class="imgthumb" id="bluebuffalo" alt="Blue Buffalo stew canned"/></a>
    <div class="text_line">
      <a href="images/dog_blue_can_stew_beef.jpg" rel="lightbox" title="amp;#8226;Blue Buffalo<br />amp;#8226;Stew beef canned<br />amp;#8226;In Store Sizes: 12.5oz">DETAILS<br /></a>
      Blue Buffalo<br />
      Canned Dog Food<br />
      Stew<br />
      beef<br />
    </div>
  </div>

Первое, что я бы сделал, это полностью избавиться от класса «imgthumbhold». В каждом месте, где у вас есть этот класс, измените DIV на SECTION . Затем задайте стиль CSS для всех РАЗДЕЛОВ. Таким образом, вам не нужно тратить класс на этот общий стиль.

Я бы поместил два класса в каждый элемент РАЗДЕЛА.

class=’dry’ или class = ‘wet’
class=’brand’

При выборе выпадающего меню для wet или dry запустите скрипт, который скрывает или отображает все элементы РАЗДЕЛА по классам. Вот jsFiddle, который делает то, что вы хотите:

Скрыть элементы в чистом Javascript

1. Да, это хранилище немного старомодно по-своему, поэтому в нем нет базы данных о чем бы то ни было. Я записал всю эту информацию, когда работал там. К сожалению, «imgthmbhold» — это то, что удерживает изображения и соответствующие им подписи в аккуратных маленьких прямоугольниках, поэтому я не могу от этого избавиться. Тем не менее, я больше изучил <РАЗДЕЛ>, и у меня есть вопросы. Во-первых, я должен поместить что-то вроде этого: <section class=»bluebrand»><section class=»bluecan»> изображения blue buffalo can </section><section class=»bluedry»> изображения blue buffalo dry</section></section> ? Или вы ссылаетесь на что-то другое?

2. Если верно первое, то это тоже похоже на то, что мне нужно, и я могу попробовать. Спасибо.

3. Если вы не можете избавиться от этого класса, я бы просто оставил его, а затем добавил два других класса в DIV. Причина, по которой я хотел заменить DIV РАЗДЕЛОМ, заключается в том, что CSS будет иметь очень специфический элемент для идентификации. Если у вас есть DIVS, внутри DIV, внутри DIV, то для какого из них CSS знает, для чего установить стиль? Это можно сделать, но тогда вам нужно начать использовать такие вещи, как nthChild. Поскольку нет фильтрации данных или динамического внедрения HTML, единственный другой вариант, который я вижу, — это скрытие или отображение HTML. И способ сделать это — с помощью логических группировок классов

4. К счастью, у меня есть только два divs, связанных с каждым изображением: «imgthmbhold», который содержит изображения и заголовок в прямоугольниках, как я уже сказал, и «text_line», который сохраняет заголовок аккуратным и не перетекает в другие изображения. Так это будет проблемой? Кроме того, если я добавлю разделы, любой код, который скрывается и отображается, будет связан с разделами, а не с отдельными изображениями, правильно?

5. Возможно, я смогу немного изменить стиль, поэтому мне не нужен div «text_line», но если нет, то максимум два div.

Ответ №3:

Используйте, как

 <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var elems = document.getElementsByTagName('*');    
    for (i = 0; i < elems.length; i  ) {
        if(elems[i].id == 'mask') {        //elems[i].className 
            elems[i].style.display = "none";
        }
    }
    });
</script>
</head>
<body>
<div id="first">
 <div id="firsttest">a</div>
  <div class="one onehelp">
   <div id="mask">
    <div id="onetip">b</div>
   </div>
   <div id="Div5">c</div>
   <div id="resultone">d</div>
  </div>
  <div class="two twohelp">
   <div id="mask">
    <div id="twotip">e</div>
   </div>
   <div id="Div6">f</div>
   <div id="resulttwo">g</div>
  </div>
  <div class="three threehelp">
   <div id="mask">
    <div id="threetip">h</div>
   </div>
   <div id="Div7">i</div>
   <div id="resultthree">j</div>
  </div>
</div>
</body>
</html>

Я скрываю div при загрузке страницы, вы можете попробовать то же самое, используя событие изменения выпадающего списка. Вы также можете попробовать использовать имя класса или использовать имя элементов.

Ответ №4:

Вы должны использовать какой-то трюк, чтобы решить эту проблему. Смотрите мой код.

 <select id='group'>
  <optgroup label="Blue Buffalo">
    <option value="bufcan">can</option>
    <option value="bufdry">dry</option>
  </optgroup>
  <optgroup label="Merrick">
    <option value="mercan">can</option>
    <option value="merdry">dry</option>
  </optgroup>
</select>

<div class="bufcan">
  <div class="imgthmb">
    <a rel="lightbox" href="images/dog_blue_can_homestyle_beef.jpg">
      <img class="imgthumb" src="images/dog_blue_can_homestyle_beef_thmb.png" />
    </a>
    Blue Buffalo<br />
    Canned Dog Food<br />
    Homestyle<br />
    beef
  </div>
</div>

<div class="mercan">
  <div class="imgthmb">
    <a rel="lightbox" href="images/dog_merrick_can_96_tripe.jpg">
      <img class="imgthumb" src="images/dog_merrick_can_96_tripe_thmb.png" />
    </a>
    Merrick<br />
    Canned Dog Food<br />
    96%<br />
    tripe
  </div>
</div>

и используйте этот код запроса.

 $(document).ready(function(){
$('#group').change(function(e){
    $.map($('#group optgroup option'), function(e) {  $('.' e.value).fadeOut(); });
    $('.' $('#group').val()).fadeIn();
});
});

Что я сделал, так это воспользовался помощью class и id , чтобы скрыть и показать соответствующие divs . Смотрите рабочий пример здесь.

1. Если вы добавляете скрипку других пользователей, убедитесь, что вы отдаете должное фактическому создателю скрипки.

2. Это похоже на то, что я ищу. Я только что вернулся домой с работы, поэтому попробую это утром. Есть ли что-нибудь, что мне нужно поместить в выпадающий список или значения списка? Я видел в подобных функциях, что задействовано больше чисел. Или это то, для чего предназначены термины «mercan» и «merdry»?

Метки: Фильтр выпадающего списка с использованием jquery или javascript