Javascript 基于元素类的jQuery筛选器选择选项
今天有一个令人困惑的问题 我试图根据某个元素中包含的类来隐藏select元素中的选项 我将首先解释我的设置: 我有两个选择元素Javascript 基于元素类的jQuery筛选器选择选项,javascript,php,jquery,Javascript,Php,Jquery,今天有一个令人困惑的问题 我试图根据某个元素中包含的类来隐藏select元素中的选项 我将首先解释我的设置: 我有两个选择元素 <select class="form-control select-box"> <option value="make-any">Make (Any)</option> <?php while($make = $makeFilter->fetch(PDO
<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,从而过滤了所有make
当用户选择诸如BMW之类的选项时,我希望“型号”选择选项仅显示与BMW关联的“型号”,因此,例如,我可以向makes div添加另一个包含“型号”的类,如下所示:
<div class="makes ' . $row["Make"] . ' ' . $row["Model"] . '">
因此,我希望jQuery根据所选的“Make”隐藏我的“Models”select元素中的选项,我只希望与上面div的“Make”关联的“Models”
有没有我可以这样做的例子?FYI,您不能在浏览器中隐藏选项。@adeneo当然可以。只需拆离它们并存储它们,准备在make选择更新时重新插入。我可以改用disable吗?@KyleNeedham-这将删除元素,这当然不是问题,问题在于隐藏选项,因此会出现注释。