javascript - 根据上一个列表的选定值填充下拉列表

Question

我有一个项目要做，我需要做一个搜索表单，用户从第一个下拉列表中选择一个项目，然后根据他的选择，在第二个下拉列表中与第一个选择相关的项目会显示等等。我在 this site 上找到了一个例子，我按照使用 php 和 mysql 的方法进行操作，但遇到了一些问题。

成功连接数据库后，得到如下代码。

Javascript:

function reload(form){
    var val=form.cat.options[form.cat.options.selectedIndex].value;
    self.location='search.php?inputCar=' + val ;
}

PHP:

 @$cat=$_GET['cat'];
 echo $cat;
 // Use this line or below line if register_global is off
 if(strlen($cat) > 0 and !is_numeric($cat)){ // to check if $cat is numeric data or not. 
 echo "Data Error";
 exit;
 };

 $query_car="SELECT DISTINCT marque_name,marque_id FROM vehicule_marque order by marque_name";


 if(isset($cat) and strlen($cat) > 0){
    $quer="SELECT DISTINCT modele_name FROM vehicule_modele where marque_id=$cat order by modele_name"; 
    } else {
        $query_modele="SELECT DISTINCT modele_name FROM vehicule_modele order by modele_name"; 
    };

HTML:

<div class="form-group col-4">
    <label for="inputCar">Choose Car</label>
    <select name="cat" id="inputCar" class="form-control" onchange="reload(this.form)">
        <option value=''>Choose one...</option>

        <?php
            foreach ($conn->query($query_car) as $noticia2) {
                if($noticia2['marque_id']==@$cat){echo "<option selected value='$noticia2[marque_id]'>$noticia2[marque_name]</option>"."<BR>";
                } else {
                    echo  "<option value='$noticia2[marque_id]'>$noticia2[marque_name]</option>";
                }
            };

        ?>

    </select>

</div>

<div class="form-group col-4">
    <label for="inputModele">Choose Model</label>
    <select name="imputModele" id="inputModele" class="form-control">
        <option>Choose one...</option>

        <?php
            foreach ($conn->query($quer) as $noticia) {
                echo  "<option value='$noticia[modele_name]'>$noticia[modele_name]</option>";
            };
        ?>

    </select>
</div>

我在使用这段代码时遇到的问题是，当我选择第一项时，它不会自动重新加载，也不会在 url 中设置所选值。但是，如果我手动编写 ?inputCar= + val ，它会重新加载并显示第一个下拉菜单。我在控制台中收到的错误是 reload is not defined。我尝试寻找解决方案，但尽管就此主题提出了多个问题，但我似乎无法找到针对我的特定问题的解决方案。我对这一切都是新手，所以我尝试这样做而不是使用 Ajax，这对我来说仍然很复杂。如果有人能看到我做错了什么并指出正确的方向，我将不胜感激。

Answer 1

谢谢大家的回答，他们帮助我找到了解决问题的方法。我最终重写了代码并使用了 jquery 和 Ajax。这是适用于与我有相同或相似问题的任何人的工作解决方案。

Ajax :

<?php

//Include database configuration file
include('dbConfig.php');

if(isset($_POST["marque_id"]) && !empty($_POST["marque_id"])) {
    //Get all state data
    $query = $db->query("SELECT * FROM vehicule_modele WHERE marque_id = ".$_POST['marque_id']." ORDER BY modele_name ");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //Display model list
    if($rowCount > 0){
        echo '<option value="">Select model</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value="'.$row['modele_id'].'">'.$row['modele_name'].'</option>';
        }
    }else{
        echo '<option value="">Model not available</option>';
    }
}

if(isset($_POST["modele_id"]) && !empty($_POST["modele_id"])){
    //Get all energy data
    $query = $db->query("SELECT energie_name FROM vehicule_energie WHERE energie_id = (SELECT energie_id FROM vehicule_modele WHERE modele_id = ".$_POST['modele_id'].")");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //Display energy list
    if($rowCount > 0) {
        echo '<option value="">Select energy</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value = "'.$row['energie_id'].'">'.$row['energie_name'].'</option>';
        }
    }else{
        echo '<option value="">Energy not available</option>';
    }
}

?>

jQuery:

<script type="text/javascript">
$(document).ready(function(){
    $('#car').on('change',function(){
        var carID = $(this).val();
        if(carID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'marque_id='+carID,
                success:function(html){
                    $('#test1').html(carID);
                    $('#model').html(html);
                    $('#energy').html('<option value="">Select model first</option>'); 
                }
            }); 
        }else{
            $('#model').html('<option value="">Select car first</option>');
            $('#energy').html('<option value="">Select model first</option>'); 
        }
    });

    $('#model').on('change',function(){
        var modelID = $(this).val();
        if(modelID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'modele_id='+modelID,
                success:function(html){
                    $('#test').html(modelID);
                    $('#energy').html(html);
                }
            }); 
        }else{
            $('#energy').html('<option value="">Select model first</option>'); 
        }
    });
});
</script>

HTML:

 <?php
    //Include database configuration file
    include('dbConfig.php');

    //Get all car data
    $query = $db->query("SELECT marque_name,marque_id FROM vehicule_marque order by marque_name");

    //Count total number of rows
    $rowCount = $query->num_rows;
    ?>
    <select name="car" id="car" >
        <option value="">Select Car</option>
        <?php
        if($rowCount > 0){
            while($row = $query->fetch_assoc()){ 
                echo '<option value="'.$row['marque_id'].'">'.$row['marque_name'].'</option>';
            }
        }else{
            echo '<option value="">Car not available</option>';
        }
        ?>
    </select>

    <div id="test1"></div>

    <select name="model" id="model">
        <option value="">Select car first</option>
    </select>

    <div id="test"></div>

    <select name="energy" id="energy">
        <option value="">Select model first</option>
    </select>

为了使代码更清晰，我应该指出我的表格的样子:

energie_id energie_name
1          diesel
2          essence
3          electric

marque_id marque_name
1         audi
2         mercedes
3         bmw

modele_id marque_id energie_id modele_name
1         1         1          A4
2         1         1          Q5
3         2         2          SLK