【问题标题】:Filling the drop down list based on the selected value of previous list根据上一个列表的选定值填充下拉列表
【发布时间】:2018-04-23 12:58:36
【问题描述】:

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

【问题讨论】:

  • 我假设你在某处有一个&lt;form&gt; 标签
  • 您在使用之前实际上并没有检查$_GET['cat'] 是否存在!因此使用@
  • 不幸的是,我认为你偶然发现了一个糟糕的例子。我很想重新开始。
  • 简单规则如果你必须使用@错误抑制你做错了什么
  • 是的,我确实有一个&lt;form&gt; 标签,我只是复制了无效的相关代码,我深表歉意。你是对的,如果我删除 @,我会收到一个未定义的错误。

标签: javascript php mysql


【解决方案1】:

感谢大家的回答,他们帮助我找到了解决问题的方法。我最终重写了代码并使用了 jquery 和 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

【讨论】:

    【解决方案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));
       });
    }); 
    

    【讨论】:

      【解决方案3】:

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

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

      You use Jquery getJson to update the combo when a selected item change.

          <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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-07-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多