php - 当另一个选择框更改时，Jquery 自动更改选择框值

Question

我有这行 PHP 代码 $data = json_decode($response, true); 和 $items = $data['items'] ，即返回 json来自特定 URL 的数据如下

{
    "items": [
        {
        "family": "ABeeZee",
        "variants": ["regular","italic"]
        },
        {
        "family": "Abril Fatface",
        "variants": ["regular","400italic","900"]
        },
        {
        "family": "Advent Pro",
        "variants": ["100","200","300","regular","500","600","700"]
       }
  ]
}

我创建了这个 foreach 循环来检索字体系列名称，并将它们放入选择框中，代码工作没有问题。

我想创建另一个选择框来根据每个字体系列检索变体数据。我希望当我选择 ABeeZee 字体时，变体选择框仅显示常规和斜体。当我选择 Abril Fatface 字体时，变体选择框仅显示 regular、400italic 和 900。我如何使用 jquery 来做到这一点？

<select name="font-family" id="fonts">
<?php 
foreach ($items as $item) {
  $font_names  = $item['family'];
  <option value="<?php echo $font_names; ?>"><?php echo $font_names; ?></option><?php
}
?>
</select>

Answer 1

您必须使用 PHP 代码将当前选定的变体保存在第二个 select 标记内。将第二个 select 标记框更改为下面的这个 select 框

<select id="variants" name="<?php echo $bsn_option; ?>[<?php echo $id2; ?>]" class="form-control">
<?php
    $currentFont = $YPE_font[$id1];
    foreach ($jsItems[$currentFont] as $variants) { ?>
        <option value="<?php echo $variants; ?>" <?php echo selected($YPE_font[$id2], $variants, false); ?>><?php echo $variants; ?></option><?php
    }
?>