时间戳

首页 > 解决方案 > JavaScript 更改元素上的类以用于级联下拉列表

javascript - JavaScript 更改元素上的类以用于级联下拉列表

问题描述

我有一个网站，它使用 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>

这个想法是，例如，如果在第一个下拉列表中选择“列表”，则 JavaScript 或 JQuery 脚本将从中删除“隐藏”类；

<option class="Listing hide">

标签： javascriptphpjqueryhtml

解决方案

您在第一个下拉列表中没有“列表”，但为什么不在第一个下拉列表中使用 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>

推荐阅读