javascript - PHP实时添加动态类别

Question

我正在网站上制作这个元素，其中有元素列表，它们有 id，还有另一组数据，其 id 与第一个数据集相同，并且每个数据都有自己的 id。所以我想通过获取第一个选项的 id 来显示选项，以使用 JQuery 或 JScript 和 PHP 实时显示其他选项。我的代码如下所示

类别为

1. 电子产品
2. field

子类别适用于电子产品

电子产品
硬件
软件

field
我的家
friend 之家

<select name="category" id="catagoryid">
    <?php  
        $categories = selectAllData('categories');
        while ($row = mysqli_fetch_assoc($categories)) {
            $cat_id = $row['cat_id'];
            $cat_title = $row['cat_title'];
            echo "<option value='{$cat_id}'>{$cat_title}</option>";
        }
    ?>
</select>

另一组在这里

<select name="subcategory" id="subcategory">
    <?php  
        $subcategories = selectAllData('subcategories');
        while ($row = mysqli_fetch_assoc($subcategories)) {
            $cat_id = $row['cat_id'];
            $sub_cat_id = $row['sub_cat_id'];
            $sub_title = $row['sub_cat_title'];
            echo "<option value='{$sub_cat_id}' title='{$cat_id}'>{$sub_title}</option>";

        };
    ?>  
</select>

到目前为止我尝试过的是

$('#subcategory').change(function(event) {
    var subcategory = $(this).find('option:selected').attr("title");
    if (subcategory!==categoryid) {
        if ($(this).find('option:selected').val()!==categoryid) {
            $(this).find('option:selected').hide();
        }
    }
});

还有其他方法，我从昨天就被困在这里了。我尝试从 JavaScript 获取所选元素的值并运行 php。但我注意到 php 在 Jscript 之前加载，所以没有办法这样做。还有另一种在 PHP 中运行 Jscript 的方法，但如果用户选择另一个元素，我无法获取该值。

Answer 1

一种方法是删除并存储所有子类别 <option>页面加载时。

然后克隆并过滤存储的<option>并在第一个选择更改时替换第二个选择中的内容。

您可以使用类或数据属性作为过滤器

//remove and store subcategory options
var $subCatOpts = $('#subcategory option').detach();

$('#catagoryid').change(function() {
  var catId = this.value;
  // clone stored ones so we always have them available...then filter
  var $opts = $subCatOpts.clone().filter(function() {
    return !this.value || catId === $(this).attr('data-catid')
  });
  $('#subcategory').html($opts)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Category:
<select name="category" id="catagoryid">
  <option value=""> -- Select Category -- </option>
  <option value="1">Electronics</option>
  <option value="2">Venues</option>
</select>

Subcategory
<select name="subcategory" id="subcategory">
  <option value=""> -- Select Sub category -- </option>
  <option value="1" data-catid="1">Electronics - Sub 1</option>
  <option value="2" data-catid="1">Electronics - Sub 2</option>
  <option value="3" data-catid="2">Venues - Sub 1</option>
  <option value="4" data-catid="2">Venues - Sub 2</option>
</select>