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>

我对此代码的问题是，当我选择第一项时，它不会自动重新加载，并且它不会在网址中设置所选的值。但是，如果我手动编写?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

Answer 2

我会使用Jquery来做这个技巧，比如这个

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
$('#inputCar').change(function(){
   var selected = $(this).find(':selected').attr('value');
   var newOptions = {"Option 1": "value1",
      "Option 2": "value2",
      "Option 3": "value3"
   };
   var $el = $("#inputModele");
   $el.empty(); // remove old options
      $.each(newOptions, function(key,value) {
      $el.append($("<option></option>")
      .attr("value", value).text(key));
   });
});

Answer 3

几天前我问了一个类似的问题。 How return null for an empty combo box instead of 0?

您需要使用javasscript处理级联组合。此示例使用c＃创建数据，因此验证错误是框架处理的内容。但是视图页面使用javascript更新

当所选项目发生更改时，您可以使用Jquery getJson更新组合。

    <script type="text/javascript">
        var localityUrl = '@Url.Action("FetchLocalities")';
        var subLocalityUrl = '@Url.Action("FetchSubLocalities")';
        var coodinatesUrl = '@Url.Action("FetchCoordinates")';
        var localities = $('#SelectedLocality');
        var subLocalities = $('#SelectedSubLocality');
        $('#SelectedCity').change(function() {
            localities.empty();
            subLocalities.empty();
            $.getJSON(localityUrl, { ID: $(this).val() },function(data) {
                if (!data) {
                    return;
                }
                localities.append($('<option></option>').val('').text('Please select'));
                $.each(data, function(index, item) {
                    localities.append($('<option></option>').val(item.Value).text(item.Text));
                });
            });
            $.getJSON(coodinatesUrl, { ID: $(this).val() }, function(data) {
                console.log(data);
            });
        })
        $('#SelectedLocality').change(function() {
            subLocalities.empty();
            $.getJSON(subLocalityUrl, { ID: $(this).val() },function(data) {
                if (!data) {
                    return;
                }
                subLocalities.append($('<option></option>').val('').text('Please select'));
                $.each(data, function(index, item) {
                    subLocalities.append($('<option></option>').val(item.Value).text(item.Text));
                });
            });
        })                

    </script>

以下是工作演示https://dotnetfiddle.net/1bPZym

根据上一个列表

3 个答案: