用于更改级联下拉列表的元素上的类的JavaScript
用于更改级联下拉列表的元素上的类的JavaScript
提问于 2018-10-29 03:48:37
我有一个网站，它使用PHP来查看SQL Server上的各种表，这些表提供了他们的数据下拉列表。我希望创建一个级联下拉列表，下面是提供HTML的代码。
div class="col-md-4" class="form-control" id="Type">
<select>
<?php foreach ($conn->query($sqlType) as $row){echo '<option
class="'.$row['ShortCode'].'">'.$row['Type'].'</option>';} ?>
</select>
</div>下面是结果
<option class=""></option>
<option class="Deal">Deal</option>
<option class="Price">Price</option>
<option class="Promo">Promo</option>
<option class="Promo">Promo</option>
<option class="LTD">Long term Deal</option>在另一个下拉列表中，我们希望隐藏第一个下拉列表中未选择的选项。
<div class="col-md-4" class="form-control" id="Category">
<select">
<?php foreach ($conn->query($sqlCategory) as $row){echo '<option
class="'.$row['Type'].' hide">'.$row['Category'].'</option>';} ?>
</select>
</div>
<select">结果如下。
<option class=" hide"></option>
<option class="Deal hide">Exceptional / Clearance</option>
<option class="Promo hide">Invoice</option>
<option class="Promo hide">Retro</option>
<option class="Listing hide">New</option>
<option class="Listing hide">Delisting</option>
<option class="Price hide">Increase</option>
<option class="Price hide">Decrease</option>
<option class="LTD hide">Off Invoice (ZXPN Only)</option>
<option class="LTD hide">Retro (No ZR88)</option>例如，如果在第一个下拉菜单中选择了"Listing“，则JavaScript或JQuery脚本将删除"hide”类；
<option class="Listing hide">回答 1
Stack Overflow用户
发布于 2018-10-29 03:56:28
您在第一个下拉列表中没有“清单”，但是为什么不在第一个下拉列表中使用value，那么就不需要删除类了
$(function() {
$("#Type").on("change","select", function() {
var $cat = $("#Category>select");
$cat.find("option:gt(0)").hide(); // keep first option
$("." + this.value, $cat).show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4" class="form-control" id="Type">
<select>
<option value=""></option>
<option value="Deal">Deal</option>
<option value="Price">Price</option>
<option value="Promo">Promo</option>
<option value="Listing">Listing</option>
<option value="LTD">Long term Deal</option>
</select>
</div>
<div class="col-md-4" class="form-control" id="Category">
<select>
<option class=""></option>
<option class="Deal">Exceptional / Clearance</option>
<option class="Promo">Invoice</option>
<option class="Promo">Retro</option>
<option class="Listing">New</option>
<option class="Listing">Delisting</option>
<option class="Price">Increase</option>
<option class="Price">Decrease</option>
<option class="LTD">Off Invoice (ZXPN Only)</option>
<option class="LTD">Retro (No ZR88)</option>
</select>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53035471
复制相关文章
相似问题