使用javascript从2个mysql查询中选择要在2上使用的数组

xxb16uws 于 2021-06-18 发布在 Mysql

关注(0)|答案(2)|浏览(309)

我已经用第一个查询的结果填充了第一个html select。
现在，我需要或想要做的是将第二个查询的结果放在json文件（可能）或xml（不在乎）上，然后使用javascript（不是jquery）根据所选的第一个html select选项填充第二个html select。
这是我当前的代码：

<?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>

出于关系的目的，brands表中的id与models表中的brand\u id相关。
品牌html选择显示的品牌只是完美的，因为它应该和选项，是显示所有品牌的模型的完整列表。
我确信onchange事件应该在第一个html select上使用，这是我在没有javascript的情况下所能做到的。
当然，我看过其他类似的问题，但找不到一个符合我的想法。
你有什么建议吗真正的天才：-）

mysql JSON php JavaScript Html

来源：https://stackoverflow.com/questions/53197971/arrays-from-2-mysql-queries-to-be-used-on-2-select-using-javascript

2条答案

按热度按时间

z0qdvdin1#

这里有一种方法。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>

赞(0）回复(0）举报 2021-06-18

nkhmeac62#

简单的解决方案是：
创建一个包含所有模型的php数组，然后将这些模型写入javascript数组：

$models = [];
while($model=mysqli_fetch_assoc($q2)){
   $models_select=$models_select.'<option value="'. $model['id'] .'">'. $model['modelo'] .'</option>';
   $models[] = $model;
}

?>
<script>
var moduls = <?php echo json_encode($models); ?>  // this makes a JSON string out of the php array, which js can interpret as javascript array/object.
function populateModels(brandId) {
    // TODO:
    // filter the models that have the right brandId
    // generate the options of the fitting models
    // write the options to select #models
}
</script>

一个更好的解决方案（因为您没有可能不使用的大量数据）是使用ajax，您可以在“动态选择”的许多问题/答案中找到这一点

赞(0）回复(0）举报 2021-06-18

我来回答

使用javascript从2个mysql查询中选择要在2上使用的数组

2条答案

相关问题

热门标签

最新问答