使用 JavaScript 使用多个下拉列表进行搜索过滤答案

【问题标题】：Search filter using multiple dropdowns with JavaScript使用 JavaScript 使用多个下拉列表进行搜索过滤
【发布时间】：2021-09-06 08:54:06
【问题描述】：

事情是这样的：我用 7 个下拉菜单和每个下拉菜单中的一些选项创建了这个菜单，我想过滤将根据下拉列表中的值显示的 div。我不知道如何关联 div 中的 de 类和下拉值以使此过滤器工作。我已经做了几天了，如果有人知道该怎么做并帮助我:')

（在 JavaScript 中，在函数中放置一个 for，在单击时删除一个 div，只是为了测试，实际上我只想显示在过滤器上有值的 div，然后隐藏其他的，如果值为空则显示全部）

HTML：

    <!--Search dropdown-->
<div>
    <select name="" id="type">
        <option selected value="">All type</option>
        <option value="house">house</option>
        <option value="apartament">Apartament</option>
        <option value="farm">farm</option>
        <option value="land">land</option>
    </select>
</div>
<div>
    <select name="" id="city">
        <option selected value="">All cities</option>
        <option value="city1">city1</option>
        <option value="city2">city2</option>
        <option value="city3">city3</option>
    </select>
</div>
<div>
    <select name="" id="district">
        <option selected value="">District</option>
        <option value="district1">district1</option>
        <option value="district2">district2</option>
        <option value="disctrict3">disctrict3</option>
    </select>
</div>
<div>
    <select name="" id="price">
        <option selected value="">Price</option>
        <option value="30">$ 30.000 to $ 80.000</option>
        <option value="80">$ 80.000 to $ 150.000</option>
        <option value="150">$ 150.000 to $ 300.000</option>
        <option value="300">$ 300.000 or more</option>
    </select>
</div>
<div>
    <select name="" id="room">
        <option selected value="">Room</option>
        <option value="1-r">1</option>
        <option value="2-r">2</option>
        <option value="3-r">3</option>
        <option value="4-r">4 or more</option>
    </select>
</div>
<div>
    <select name="" id="garage">
        <option selected value="">Garage</option>
        <option value="1-g">1</option>
        <option value="2-g">2</option>
        <option value="3-g">3</option>
        <option value="4-g">4 or more</option>
    </select>
</div>
<div>
    <select name="" id="bath">
        <option selected value="">baths</option>
        <option value="1-b">1</option>
        <option value="2-b">2</option>
        <option value="3-b">3</option>
        <option value="4-b">4 or more</option>
    </select>
</div>
<div>
    <button type="button" id="searchFilter" onclick="getSelectedValue()">Search property</button>   
</div>    

<!--Cards-->
<div class="cards">
    <div class="city1 1-b 1-r 1-g"> <!--Here is the classes according to the filter-->
        <h2>155 Center<br/>City1</a></h2>
        <span> Sell | $ 120.000</span>
        <h4>Area</h4>
        <span>340m</span>
        <h4>Room</h4>
        <span>2</span>
        <h4>Bath</h4>
        <span>2</span>
        <h4>Garage</h4>
        <span>1</span> 
    </div>

    <div class="city2 2-b 2-r 2-g"> <!--Here is the classes according to the filter-->
        <h2>155 Center<br/>City3</a></h2>
        <span> Sell | $ 120.000</span>
        <h4>Area</h4>
        <span>340m</span>
        <h4>Room</h4>
        <span>2</span>
        <h4>Bath</h4>
        <span>2</span>
        <h4>Garage</h4>
        <span>1</span> 
    </div>

    <div class="city3 3-b 3-r 3-g"> <!--Here is the classes according to the filter-->
        <h2>155 Center<br/>City3</a></h2>
        <span> Sell | $ 120.000</span>
        <h4>Area</h4>
        <span>340m</span>
        <h4>Room</h4>
        <span>2</span>
        <h4>Bath</h4>
        <span>2</span>
        <h4>Garage</h4>
        <span>1</span> 
    </div>
</div>

JavaScript：

    //capture dropdown values
document.getElementById('searchFilter').onclick = function getSelectValue(){

var typeValue = document.getElementById("type").value;
console.log(typeValue)
var cityValue = document.getElementById("city").value;
console.log(cityValue)
var districtValue = document.getElementById("district").value;
console.log(districtValue)
var priceValue = document.getElementById("price").value;
console.log(priceValue)
var roomValue = document.getElementById("room").value;
console.log(roomValue)
var garageValue = document.getElementById("garage").value;
console.log(garageValue)
var bathValue = document.getElementById("bath").value;
console.log(bathValue)


//hide card with certain class
var x = document.getElementsByClassName('city1');
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
}
document.getElementsByClassName('cards')[0].style.display = 'flex'
}

【问题讨论】：

卡片应该是通过javascript动态创建的，“卡片信息”应该包含在一个用对象填充的数组中。你不应该像那样对数据进行硬编码。 Vue、React 或 Angular 等框架基本上就是为这种功能而设计的。
我知道我不应该那样硬编码，我的计划是为此尽快学习 React，但我需要尽快完成这个项目，不知道如何在没有框架的情况下解决它...
你是想只显示匹配过滤器的东西，还是隐藏它们？我对您的代码注释感到有些困惑。 hide card with certain class
我正在尝试仅显示与过滤器匹配的内容。
如果是3号城市的房子会是什么样子呢？用户会选择多个选项吗？也就是说，如果他们选择 house 和 city3，我们会只显示这两个类的东西吗？

标签： javascript html css search filter

【解决方案1】：

我最终使用 PHP 和 MySQL 和 Ajax 完成了这个搜索过滤器。我之前尝试以错误的方式进行操作，可能会使页面变得非常慢。

我确实喜欢这个例子： https://www.phpzag.com/demo/product-search-filter-with-ajax-php-mysql/

感谢您的回答，并为无知感到抱歉。生活和学习！

【讨论】：

【解决方案2】：

虽然我认为你这样做的方式是一个糟糕的想法，但为了学习目的，我为你做了一个小例子。希望不必改变太多现有结构。自从我在不使用 jQuery 的情况下做了这样的事情以来已经有一段时间了，但是这里有！

获取所有属性的数据并将它们放入对象数组中。这将有助于使用 Array.prototype.filter() 函数进行过滤。现在使用一个仅包含已通过搜索条件的对象的数组，构建可视元素。每个对象都将显示为“卡片”，它是自己的 DIV。然后将每张卡片添加到父 DIV，即名为“卡片”的卡片容器。

https://jsfiddle.net/phaelax/9dnfpj87/

这只是实现您想要的一种方法。另一种方法是显示所有内容并在每张卡片上使用数据属性。抓住所有卡片并简单地隐藏与搜索参数不匹配的卡片。这可以防止对 DOM 进行如此多的操作，并且可能更可取。

HTML：

<div>
  <label>
      City:
      <select name="" id="city">
          <option selected value=""></option>
          <option value="city 1">City 1</option>
          <option value="city 2">City 2</option>
          <option value="city 3">City 3</option>
      </select>
    </label>
    
    <label>
      Area:
      <select name="" id="area">
          <option selected value=""></option>
          <option value="300">&#60;= 300</option>
          <option value="350">&#60;= 350</option>
          <option value="400">&#60;= 400</option>
      </select>
    </label>
</div>

<div>
    <button type="button" id="searchFilter" onclick="getSelectedValue()">Search property</button>   
</div>    

<!--Cards-->
<div id="cards">
   
</div>

JS：

// The data of your various items to display
var properties = [{city:"city 1", price:120000, area:300, room:2, bath:2, garage:1},{city:"city 2", price:120000, area:340, room:3, bath:2, garage:1},{city:"city 3", price:120000, area:375, room:2, bath:2, garage:1}];



//capture dropdown values
document.getElementById('searchFilter').onclick = function getSelectValue() {

    // Get the dropdown values
  var cityValue = document.getElementById("city").value;
    var areaSize = parseInt(document.getElementById("area").value);
  
  // Empty the existing data
  cardContainer = document.getElementById("cards");
  while (cardContainer.firstChild){ 
    cardContainer.removeChild(cardContainer.firstChild);
  }
  

    // Filter out the data, retrieve an array of only the objects that
  // that meet our search criteria
  filteredProperties = properties.filter(e => {

    if (cityValue !== "" && e.city !== cityValue)
      return false;

    if (!isNaN(areaSize) && e.area > areaSize)
      return false;

    return true;
  });

  
  
    // Loop through filtered objects and build the elements to display
  filteredProperties.forEach(e => {
  
    // Each property is contained with a "card"
    var card = document.createElement("DIV"); // create the card div element
    card.classList.add("card");  // add some style

        // Loop through each value in the object and build elements
    for (var key in e){
        var propHeading = document.createElement("h2");
      propHeading.innerHTML = key;
      
      var propValue = document.createElement("span");
      propValue.innerHTML = e[key];
      
      // Append the values to the card element
      card.appendChild(propHeading);
      card.appendChild(propValue);
    }
    
    // Add this new card to the cards container
    document.getElementById("cards").appendChild(card);

  });

}

CSS：

.card {border:1px solid black;display:inline-block;margin:10px;width:150px;}

【讨论】：