基于上一个列表的选定值填充下拉列表

kuhbmx9i 于 2021-06-21 发布在 Mysql

关注(0)|答案(3)|浏览(388)

我有一个项目要做，我需要做一个搜索表单，用户从第一个下拉列表中选择一个项目，然后根据他的选择，在第二个下拉列表中显示与第一个选择相关的项目，依此类推。我在这个网站上找到了一个例子，我使用了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，这对我来说还是相当复杂的。如果有人能看到我做错了什么，给我指出正确的方向，我将不胜感激。

mysql php JavaScript

来源：https://stackoverflow.com/questions/49981722/filling-the-drop-down-list-based-on-the-selected-value-of-previous-list

3条答案

按热度按时间

pbossiut1#

谢谢大家的回答，他们帮我找到了解决问题的办法。最后我重写了代码并使用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

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

rdlzhqv92#

几天前我问了一个类似的问题。如何为空组合框返回null而不是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

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

ygya80vv3#

我会使用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));
   });
});

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

我来回答

基于上一个列表的选定值填充下拉列表

3条答案

相关问题

热门标签

最新问答