Question

在这里遇到一些问题，了解如何在我的网页上进行以下操作：

是的，所以目前我的页面上有两个选择元素，其中一个选择元素如下所示：

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

正如您所看到的，此代码正在循环播放＆＃39;制作＆＃39;我的SQL表的列，在包含我已经创建的查询的单独文件中，因此查询使用DISTINCT，因此它不会循环使用相同的＆＃39;制作＆＃39;因为机会是相同的＆＃39;制造＆＃39;在专栏中。

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

<?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表的各个列以显示整个表。请注意，具有＆＃39;类的div使得＆＃39;还包括专栏＆＃39;制作＆＃39;在div。

然后我使用这个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。

所以这一切都很棒然而我觉得它对我的用户来说还不够，我现在希望用户能够使用第二个选择元素来选择＆＃39; Model＆＃39 ; ＆＃39; Make＆＃39;。

现在我知道我可以用我最初做的相同技术轻松做到这一点但是用户可以选择宝马＆＃39;然后选择一个与＆＃39; Make＆＃39;相关联的模型。并且不会返回任何结果。

我喜欢我的选择元素包含＆＃39;模型＆＃39;首先要禁用，直到用户选择“制作”为止。然后当用户选择了“制作”＃39;我希望第二个选择元素仅显示＆＃39;模型＆＃39;与之相关的＆＃39; Make＆＃39;。

以下是我的SQL表中列的示例：

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

我现在不确定如何才能实现这一点，这让我很困惑。

如果有人能够向我展示一个详细的例子并解释每个部分的作用，那会很棒，因为我有点卡住了，谢谢。

Answer 1

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

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


    $('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（...）

PHP，MySQL＆amp; jQuery：动态显示选择选项

1 个答案: