PHP、MySQL 和 jQuery：动态显示选择选项答案

【问题标题】：PHP, MySQL & jQuery: Display select options dynamicallyPHP、MySQL 和 jQuery：动态显示选择选项
【发布时间】：2014-11-22 00:48:07
【问题描述】：

在理解如何在我的网页上执行以下操作时遇到了一点问题：

现在我的页面上有两个选择元素，其中一个选择元素如下所示：

 <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>

如您所见，此代码循环我的 SQL 表的“Make”列，在包含我所做的查询的单独文件中，因此查询使用 DISTINCT，因此它不会循环相同的“Makes”因为列中可能会有相同的“品牌”。

然后我有这段代码在前端显示另一个查询：

<?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 表的各个列以显示几乎整个表。请注意，具有“makes”类的 div 还包括 div 中的“Make”列。

然后我使用这个 jQuery 来过滤将什么结果带到屏幕上：

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

如您所见，它只是隐藏了不具有已选择的选择值的类的 div。

所以所有这些都很棒，但是我觉得这对我的用户来说还不够，我现在希望用户能够使用第二个选择元素来选择“制造”的“模型”。

现在我知道我可以使用最初使用的相同技术轻松完成此操作，但随后用户将能够选择“BMW”，然后选择与“制造”无关的模型，并且不会有任何结果返回。

我希望首先禁用包含“模型”的选择元素，直到用户选择了“制作”，然后当用户选择了“制作”时，我希望第二个选择元素仅显示与该“品牌”相关的“模型”。

这是我的 SQL 表中的列示例：

Make, Model, Colour, FuelType, Year, Mileage, Bodytype, Doors, Variant, EngineSize, Price, Transmission, PictureRefs, ServiceHistory, PreviousOwners, Options, FourWheelDrive

我现在不确定如何才能做到这一点，这真的让我感到困惑。

如果有人可以向我展示一个详细的示例并解释每个部分的作用，那就太好了，因为我有点卡住了，谢谢。

【问题讨论】：

标签： php jquery mysql sql

【解决方案1】：

有两种选择：可以预加载数据，在JS中保存为对象，需要时显示。

或者您可以在需要时使用 ajax 调用来加载数据（现在大多数网站都这样做）采用


    $('makeselect').on('change', function() {
    $.get("getmodels.php?make="+$("makeselect").val(),function(data){
    var models=json.parse(data);
    //iterate through the object and create the option tags
    });
    });

并给选择一个ID。在 php 上，您应该发送用 json 编码的数据。 json_encode(...)

【讨论】：