Question

今天有一个令人困惑的问题。

我试图根据某个元素中包含的类隐藏select元素中的选项。

我将首先解释一下我的设置：

我有两个选择元素

<select class="form-control select-box">
                 <option value="make-any">Make (Any)</option>
                 <?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC))
                 {
                 echo '
                 <option value="'.$make["Make"].'">'.$make["Make"].'</option>
                 ';
                 } ?>
</select>
<select class="form-control last-select select-box">
                 <option value="model-any">Model (Any)</option>
                 <?php while($model = $modelFilter->fetch(PDO::FETCH_ASSOC))
                 {
                 echo '
                 <option value="'.$model["Model"].'">'.$model["Model"].'</option>
                 ';
                 } ?>
</select>

这两个元素使用PHP while循环遍历我的SQL表的'Make'和'Model'。

然后我将这段代码列出到前端的所有结果：

<?php include('db-affinity/filter.php'); ?>
      <div class="col-md-8 col-sm-8 col-lg-8">
      <?php while($row = $results->fetch(PDO::FETCH_ASSOC))
      {
      echo '
      <div class="makes ' . $row["Make"] . '">
        <div class="listing-container">
          <a href="carpage.php"><h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3></a>
          <h3 class="price-listing">£'.number_format($row['Price']).'</h3>
        </div>
        <div class="listing-container-spec">
         <img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
          <div class="ul-listing-container">
            <ul class="overwrite-btstrp-ul">
              <li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
              <li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
              <li class="gear-svg list-svg">'.$row["Transmission"].'</li>
              <li class="color-svg list-svg">'.$row["Colour"].'</li>
            </ul>
          </div>
          <ul class="overwrite-btstrp-ul other-specs-ul h4-style">
            <li>Mileage: '.number_format($row["Mileage"]).'</li>
            <li>Engine size: '.$row["EngineSize"].'cc</li>
          </ul>
          <button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked 
          </button>
          <button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details 
          </button>
          <button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive 
          </button>
          <h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
        </div>
        </div>
          ';
      } ?>

正如您所看到的，这个块也是循环的，以显示我的SQL表的所有行。

然后我让这个jQuery隐藏所有与第一个select元素中选择的选项没有相同值的类：

<script>
    $(document).ready(function(){
  $('.form-control').change(function(){
    var make = $(this).val();
    if(make != 'make-any'){
      $('.makes').hide();
      $('.'+make).show();
      } else {
        $('.makes').show();
        }
    });
  });</script>

正如您所看到的，它隐藏了包含“make”类的列表中的div，从而过滤了所有的内容。

当用户选择BMW等选项时，我希望“模型”选择选项仅显示与BMW关联的“模型”，例如我可以在包含“模型”的品牌div中添加另一个类就像这样：

<div class="makes ' . $row["Make"] . ' ' . $row["Model"] . '">

所以我希望jQuery根据选择'Make'来隐藏我的'Models'选择元素中的选项，我只想要与上面div的'Make'相关联的'Models'。

我如何做到这一点的任何例子？

基于元素类的jQuery过滤器选择选项

0 个答案: