javascript - 来自 2 个 MySQL 查询的数组用于使用 javascript 的 2 个选择

Question

我已经有了由第一个查询的结果填充的第一个 HTML 选择。

现在我需要或想要做的是将第二个查询的结果放在 Json 文件(可能)或 XML(不关心)上，然后使用 javascript (不是 jquery)填充第二个 HTML 选择基于选择第一个 HTML 选择选项。

这是我当前的代码:

    <?php
    # Get all brands id and brand name to populate brands HTML select 1
    $q1=mysqli_query($conect,"SELECT id, brand FROM brands ORDER BY brand ASC");
    $brand_select="";
    while($brand=mysqli_fetch_assoc($q1)){
      $brand_select=$brand_select.'<option value="'. $brand['id'] .'">'. $brand['brand'] .'</option>';
    }
    # Get all models id and model name to populate models HTML select based on the brands ID from html select 1
    $q2=mysqli_query($conect,"SELECT id, brand_id, model FROM models ORDER BY model ASC");
    $models_select="";
    while($model=mysqli_fetch_assoc($q2)){
      $models_select=$models_select.'<option value="'. $model['id'] .'">'. $model['modelo'] .'</option>';
    }
    ?>

    <select name="brand" id="brands" class="s1" onchange="populate(this.id,'modelos')">
      <option value="">Select Brand</option>
      <?= $brand_select ?>
    </select>
    <br>
    <select name="models" id="models" class="s1">
      <option value="">Select Model</option>
      <?= $models_select ?>
    </select>

出于关系目的，品牌表中的 ID 与型号表中的品牌 ID 相关。

品牌 HTML 选择显示的品牌恰到好处，选项按原样显示所有品牌型号的完整列表。

我确定应该在第一个 HTML 选择上使用 onChange 事件，这是我在没有 Javascript 的情况下所能得到的。

当然，我看过其他类似的问题，但找不到符合我对此想法的问题。

您真正的天才的任何建议:-)

Answer 1

这是一种实现方法。 PHP 用于生成一系列按品牌排序的模型选项 - 这使 JavaScript 的工作变得更容易。事件监听器被添加到brands 选择中，该事件监听器会相应地更新models 选择。

PHP

$q1=mysqli_query($conect,"SELECT id, brand FROM brands ORDER BY brand ASC");
$brand_select="";
while($brand=mysqli_fetch_assoc($q1)){
    $brand_select=$brand_select.'<option value="'. $brand['id'] .'">'. $brand['brand'] .'</option>';
}
# Get all models id and model name to populate models HTML select based on the brands ID from html select 1
$q2=mysqli_query($conect,"SELECT id, brand_id, model FROM models ORDER BY brand_id, model ASC");
$models_select="";
while($model=mysqli_fetch_assoc($q2)){
    $models_select[$model['brand_id']][] = '<option value="'. $model['id'] .'">'. $model['model'] .'</option>';
}
echo "<script type=\"text/javascript\">\nvar models = {};\n";
foreach ($models_select as $b => $m) {
    echo "models['$b'] = '" . implode('', $m) . "';\n";
}
echo '</script>';

Javascript

window.addEventListener('load', function () {
    document.getElementById('brands').addEventListener('change', function () {
        if (this.value != '') {
            document.getElementById('models').innerHTML = '<option value="">Select Model</option>' + models[this.value];
        }
    });
});

HTML

<select name="brand" id="brands" class="s1">
  <option value="">Select Brand</option>
  <?= $brand_select ?>
</select>
<br>
<select name="models" id="models" class="s1">
  <option value="">Select Model</option>
</select>