Фильтровать div при выборе опции

ProgramBox

Фильтровать div при выборе опции

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

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть страница с разными местоположениями с разными ценами. При выборе опции div фильтруется с помощью атрибута value. У меня есть несколько вариантов выбора. Я хочу отфильтровать divs по местоположению, а также должны быть видны цены по возрастанию. Любые другие предложения по фильтрации с помощью местоположений также приветствуются.

 $('select').each(function() {
  var $this = $(this),
    numberOfOptions = $(this).children('option').length;

  $this.addClass('select-hidden');
  $this.wrap('<div class="select"></div>');
  $this.after('<div class="select-styled"></div>');

  var $styledSelect = $this.next('div.select-styled');
  $styledSelect.text($this.children('option').eq(0).text());

  var $list = $('<ul />', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i  ) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  var $listItems = $list.children('li');

  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.select-styled.active').not(this).each(function() {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
  });

  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    //console.log($this.val());
  });

  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });

});

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".col-lg-4 ").not("."   optionValue).hide();
        $("."   optionValue).show();
      } else {
        $(".col-lg-4 ").hide();
      }
    });
  }).change();
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="sale_property" class="response">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <form>
          <ul class="nav nav-tabs" role="tablist" id="myTab">
            <li class="active"><a href="#buy" role="tab" data-toggle="tab">Buy</a></li>
            <li><a href="#rent" role="tab" data-toggle="tab">Rent / PG</a></li>
            <li><a href="#plot" role="tab" data-toggle="tab" class="responsive">Plot</a></li>
            <li><a href="#commercial" role="tab" data-toggle="tab" class="responsive">Commercial</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="buy">
              <div class="form-search">

                <div class="custom-select-wrapper">
                  <select>
                    <option value="hide" disable>-- Select Location --</option>
                    <option value="gulmohar">Gulmohar Colony, Nashik</option>
                    <option value="govind">Govind Nagar, Nashik</option>
                    <option value="makhbalabad">Makhbalabad Road, Nashik</option>
                    <option value="mhasrul">Mhasrul, Nashik</option>
                    <option value="pathardi">Pathardi Phata, Nashik</option>
                    <option value="konarch">Konark Nagar, Nashik</option>
                  </select>
                  <div class="arrow type-property"></div>
                </div>
                <select>
                  <option value="hide" disable>-- Budget --</option>
                  <option value="lac5">5Lac</option>
                  <option value="lac10">10Lac</option>
                  <option value="lac15">15Lac</option>
                  <option value="lac20">20Lac</option>
                  <option value="lac25">25Lac</option>
                  <option value="lac30">30Lac</option>
                  <option value="lac35">35Lac</option>
                  <option value="lac40">40Lac</option>
                  <option value="Above">Above 40Lac</option>
                </select>
                <div class="arrow type-property"></div>
                <select>
                  <option value="hide" disable>-- Property Type --</option>
                  <option value="Residential">Residential</option>
                  <option value="Commercial">Commercial</option>
                  <option value="Others">Others</option>
                </select>
                <div class="arrow type-property"></div>
              </div>
            </div>
            <div class="tab-pane" id="rent">
              <div class="form-search">
                <div class="custom-select-wrapper">
                  <select>
                    <option value="hide" disable>-- Select Location --</option>
                    <option value="gulmohar">Gulmohar Colony, Nashik</option>
                    <option value="govind">Govind Nagar, Nashik</option>
                    <option value="makhbalabad">Makhbalabad Road, Nashik</option>
                    <option value="mhasrul">Mhasrul, Nashik</option>
                    <option value="pathardi">Pathardi Phata, Nashik</option>
                    <option value="konarch">Konark Nagar, Nashik</option>
                  </select>
                  <div class="arrow type-property"></div>
                </div>
                <select>
                  <option value="hide" disable>-- Budget --</option>
                  <option value="5Lac">5Lac</option>
                  <option value="10Lac">10Lac</option>
                  <option value="15Lac">15Lac</option>
                  <option value="20Lac">20Lac</option>
                  <option value="25Lac">25Lac</option>
                  <option value="30Lac">30Lac</option>
                  <option value="35Lac">35Lac</option>
                  <option value="40Lac">40Lac</option>
                  <option value="Above">Above 40Lac</option>
                </select>
                <div class="arrow type-property"></div>
                <select>
                  <option value="hide" disable>-- Property Type --</option>
                  <option value="Residential">Residential</option>
                  <option value="Commercial">Commercial</option>
                  <option value="Others">Others</option>
                </select>
                <div class="arrow type-property"></div>
              </div>
            </div>
            <div class="tab-pane" id="plot">
              <div class="form-search">
                <div class="custom-select-wrapper">
                  <select>
                    <option value="hide" disable>-- Select Location --</option>
                    <option value="gulmohar">Gulmohar Colony, Nashik</option>
                    <option value="govind">Govind Nagar, Nashik</option>
                    <option value="makhbalabad">Makhbalabad Road, Nashik</option>
                    <option value="mhasrul">Mhasrul, Nashik</option>
                    <option value="pathardi">Pathardi Phata, Nashik</option>
                    <option value="konarch">Konark Nagar, Nashik</option>
                  </select>
                  <div class="arrow type-property"></div>
                </div>
                <select>
                  <option value="hide" disable>-- Budget --</option>
                  <option value="5Lac">5Lac</option>
                  <option value="10Lac">10Lac</option>
                  <option value="15Lac">15Lac</option>
                  <option value="20Lac">20Lac</option>
                  <option value="25Lac">25Lac</option>
                  <option value="30Lac">30Lac</option>
                  <option value="35Lac">35Lac</option>
                  <option value="40Lac">40Lac</option>
                  <option value="Above">Above 40Lac</option>
                </select>
                <div class="arrow type-property"></div>
                <select>
                  <option value="hide" disable>-- Property Type --</option>
                  <option value="Residential">Residential</option>
                  <option value="Commercial">Commercial</option>
                  <option value="Others">Others</option>
                </select>
                <div class="arrow type-property"></div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>

</section>

<section id="property-gallery">
    <div class="container">
    <div class="row">
    <h1>Project Gallery</h1>
        <div class="col-lg-4 makhbalabad lac40">
            <div class="property-box">
                <div class="property-img">
                    <img src="imgs/gallery/1.jpg" class="img-responsive">
                    <span class="offer-gallery">Nashik</span>
                </div>
                <div class="property-text">
                        <h2>Icon Construction</h2>
                        <p>Makhmalabad, Behind Shantinagar
Bus Stop, Makhmalabad Road, Nashik.</p>
                        <span>2 BHK Flats</span>
                    
                        <h3 class="price">amp;#8377; 39 Lac</h3>
                        <p class="onward">Onwards</p>
                        <a href="#" data-toggle="modal" data-target="#myModal">See Details</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 lac20 mhasrul ">
            <div class="property-box">
                <div class="property-img">
                    <img src="imgs/gallery/2.jpg" class="img-responsive">
                    <span class="offer-gallery">Nashik</span>
                </div>
                <div class="property-text">
                        <h2>Dreamnano residency</h2>
                        <p>Pushpak Nagar, Near Puspavinayak Temple, Mhasrul, Nashik.</p>
                        <span>1 BHK Flats</span>
                    
                        <h3 class="price">amp;#8377; 17.5 Lac</h3>
                        <p class="onward">Onwards</p>
                        <a href="#">See Details</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mhasrul above">
            <div class=" property-box">
                <div class="property-img">
                    <img src="imgs/gallery/3.jpg" class="img-responsive">
                    <span class="offer-gallery">Nashik</span>
                </div>
                <div class="property-text">
                        <h2>Icon Construction</h2>
                        <p>Aadarsh row Bunglow, Aadarsh Nagar, NEAR 
A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.</p>
                        <span>2 BHK Flats</span>
                    
                        <h3 class="price">amp;#8377; 55 Lac</h3>
                        <p class="onward">Onwards</p>
                        <a href="#">See Details</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 konark lac25 ">
            <div class="property-box">
                <div class="property-img">
                    <img src="imgs/gallery/4.jpg" class="img-responsive">
                    <span class="offer-gallery">Nashik</span>
                </div>
                <div class="property-text">
                        <h2>Home for Sale</h2>
                        <p>Sakarpuja Apartment, Near Panchkrushn Lawn,
Konark Nagar, Near Jatra Hotel, Nashik.</p>
                        <span>2 BHK Flats</span>
                    
                        <h3 class="price">amp;#8377; 25 Lac</h3>
                        <p class="onward">Onwards</p>
                        <a href="#">See Details</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        <div class="makhbalabad col-lg-4 lac30 lac25 ">
            <div class="property-box">
                <div class="property-img">
                    <img src="imgs/gallery/5.jpg" class="img-responsive">
                    <span class="offer-gallery">Nashik</span>
                </div>
                <div class="property-text">
                        <h2>Home for Resale </h2>
                        <p>Gokuldham Soc.
Behind Sharad Pawar Market Yard, Peth Road, Makhmalabad, Nashik.</p>
                        <span>2 BHK Flats</span>
                    
                        <h3 class="price">amp;#8377; 27 Lac</h3>
                        <p class="onward">Onwards</p>
                        <a href="#">See Details</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mhasrul above ">
            <div class="property-box">
                <div class="property-img">
                    <img src="imgs/gallery/3.jpg" class="img-responsive">
                    <span class="offer-gallery">Nashik</span>
                </div>
                <div class="property-text">
                        <h2>Icon Construction</h2>
                        <p>Aadarsh row Bunglow, Aadarsh Nagar, NEAR 
A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.</p>
                        <span>2 BHK Flats</span>
                    
                        <h3 class="price">amp;#8377; 55 Lac</h3>
                        <p class="onward">Onwards</p>
                        <a href="#">See Details</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        
        
      
        
        
    </div>
    </div>
</section>

Ответ №1:

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

В приведенном ниже коде я сначала перебираю все выборки, которые находятся там, tab-pane затем я использую 2 массива, один для хранения ключа-значения, то есть: если data-value =»location» и value =»makhbalabad», то ключом будет местоположение, а значением будет makhbalabad, а другой — только для храненияключи, то есть: местоположение, цена .. и т.д.

Теперь, как только мы получим все значения из выбранных, нам нужно перебрать разделы галереи проектов.Затем я проверяю, имеет ли значение в массиве класс внутри вашего div, т.е.: col-lg-4 если да, мы можем использовать некоторую переменную для хранения количества, и в зависимости от этого мы покажем или скроем это divs.Вы можете сделать то же самое и для других tab , только добавить data-value в свои поля выбора

Демонстрационный код :

 $(".col-lg-4").show();
$("select").change(function() {
  var arrSelected = [];
  var arrTypes = [];
  //loop through all selects inside a particular tab only
  $(this).closest(".tab-pane").find("select").each(function() {

    //check if value is undefined
    if (arrSelected[$(this).attr('data-value')] == undefined) {
      arrSelected[$(this).attr('data-value')] = [];
    }
    //add value in key value pair
    arrSelected[$(this).attr('data-value')].push($(this).val());
    //push key value in arry
    if ($.inArray($(this).attr('data-value'), arrTypes) < 0) {
      arrTypes.push($(this).attr('data-value')); //add key  to another array
    }

  })
  $(".col-lg-4").hide(); //hide all 
  //loop through divs
  $('.col-lg-4').each(function() {
    var intKeyCount = 0;
    //get keys of selcts
    for (key in arrTypes) {
      var blnFound = false;
      //get value at that keys
      for (val in arrSelected[arrTypes[key]]) {
        //check if the data attr matchs with class  or if value is hide
        if ($(this).hasClass(arrSelected[arrTypes[key]][val]) || (arrSelected[arrTypes[key]][val] == "hide")) {
          blnFound = true; //we found 
          break;
        }
      }
      if (blnFound) {
        intKeyCount  ; //increment value 
      }
    }
    //check if it matches atleast one -filter or if you need to match all condition then use both 
    if ((intKeyCount > 0) amp;amp; (intKeyCount == arrTypes.length)) {
      $(this).show(); //show
    } else {
      $(this).hide(); //hide
    }

  })
});

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="tab-pane active" id="buy">
  <div class="form-search">

    <div class="custom-select-wrapper">
      <!--added datta atrr-->
      <select data-value="location">
        <option value="hide" disable>-- Select Location --</option>
        <option value="gulmohar">Gulmohar Colony, Nashik</option>
        <option value="govind">Govind Nagar, Nashik</option>
        <option value="makhbalabad">Makhbalabad Road, Nashik</option>
        <option value="mhasrul">Mhasrul, Nashik</option>
        <option value="pathardi">Pathardi Phata, Nashik</option>
        <option value="konarch">Konark Nagar, Nashik</option>
      </select>
      <div class="arrow type-property"></div>
    </div>
    <!--added datta atrr-->
    <select data-value="price">
      <option value="hide" disable>-- Budget --</option>
      <option value="lac5">5Lac</option>
      <option value="lac10">10Lac</option>
      <option value="lac15">15Lac</option>
      <option value="lac20">20Lac</option>
      <option value="lac25">25Lac</option>
      <option value="lac30">30Lac</option>
      <option value="lac35">35Lac</option>
      <option value="lac40">40Lac</option>
      <option value="above">Above 40Lac</option>
    </select>
    <div class="arrow type-property"></div>
    <!--added datta atrr-->
    <select data-value="property">
      <option value="hide" disable>-- Property Type --</option>
      <option value="Residential">Residential</option>
      <option value="Commercial">Commercial</option>
      <option value="Others">Others</option>
    </select>
    <div class="arrow type-property"></div>
  </div>
</div>

<section id="property-gallery">
  <div class="container">
    <div class="row">
      <h1>Project Gallery</h1>
      <div class="col-lg-4 makhbalabad lac40">
        <div class="property-box">
          <div class="property-img">
            <img src="imgs/gallery/1.jpg" class="img-responsive">
            <span class="offer-gallery">Nashik</span>
          </div>
          <div class="property-text">
            <h2>Icon Construction</h2>
            <p>Makhmalabad, Behind Shantinagar Bus Stop, Makhmalabad Road, Nashik.</p>
            <span>2 BHK Flats</span>

            <h3 class="price">amp;#8377; 39 Lac</h3>
            <p class="onward">Onwards</p>
            <a href="#" data-toggle="modal" data-target="#myModal">See Details</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 lac20 mhasrul ">
        <div class="property-box">
          <div class="property-img">
            <img src="imgs/gallery/2.jpg" class="img-responsive">
            <span class="offer-gallery">Nashik</span>
          </div>
          <div class="property-text">
            <h2>Dreamnano residency</h2>
            <p>Pushpak Nagar, Near Puspavinayak Temple, Mhasrul, Nashik.</p>
            <span>1 BHK Flats</span>

            <h3 class="price">amp;#8377; 17.5 Lac</h3>
            <p class="onward">Onwards</p>
            <a href="#">See Details</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 mhasrul above">
        <div class=" property-box">
          <div class="property-img">
            <img src="imgs/gallery/3.jpg" class="img-responsive">
            <span class="offer-gallery">Nashik</span>
          </div>
          <div class="property-text">
            <h2>Icon Construction</h2>
            <p>Aadarsh row Bunglow, Aadarsh Nagar, NEAR A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.</p>
            <span>2 BHK Flats</span>

            <h3 class="price">amp;#8377; 55 Lac</h3>
            <p class="onward">Onwards</p>
            <a href="#">See Details</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 konark lac25 ">
        <div class="property-box">
          <div class="property-img">
            <img src="imgs/gallery/4.jpg" class="img-responsive">
            <span class="offer-gallery">Nashik</span>
          </div>
          <div class="property-text">
            <h2>Home for Sale</h2>
            <p>Sakarpuja Apartment, Near Panchkrushn Lawn, Konark Nagar, Near Jatra Hotel, Nashik.</p>
            <span>2 BHK Flats</span>

            <h3 class="price">amp;#8377; 25 Lac</h3>
            <p class="onward">Onwards</p>
            <a href="#">See Details</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="makhbalabad col-lg-4 lac30 lac25 ">
        <div class="property-box">
          <div class="property-img">
            <img src="imgs/gallery/5.jpg" class="img-responsive">
            <span class="offer-gallery">Nashik</span>
          </div>
          <div class="property-text">
            <h2>Home for Resale </h2>
            <p>Gokuldham Soc. Behind Sharad Pawar Market Yard, Peth Road, Makhmalabad, Nashik.</p>
            <span>2 BHK Flats</span>

            <h3 class="price">amp;#8377; 27 Lac</h3>
            <p class="onward">Onwards</p>
            <a href="#">See Details</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 mhasrul above ">
        <div class="property-box">
          <div class="property-img">
            <img src="imgs/gallery/3.jpg" class="img-responsive">
            <span class="offer-gallery">Nashik</span>
          </div>
          <div class="property-text">
            <h2>Icon Construction</h2>
            <p>Aadarsh row Bunglow, Aadarsh Nagar, NEAR A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.</p>
            <span>2 BHK Flats</span>

            <h3 class="price">amp;#8377; 55 Lac</h3>
            <p class="onward">Onwards</p>
            <a href="#">See Details</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>





    </div>
  </div>
</section>

1. Это сработало для меня, но когда я выбираю параметры из -выберите местоположение — и повторно выбираю — выберите местоположение — div не отображается

2. Привет, я обновил свой код .. посмотрите, дайте мне знать, если это тоже не сработает сейчас 🙂