Question

我试图做一个包含3个元素的简单表单：

国家/地区
城市
网站。

我正在使用mysql，<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script> function getCity(val) { $.ajax({ type: "POST", url: "getcity.php", data:'country='+val, success: function(data){ $("#city").html(data); } });getsite(); } function getSite(val) { $.ajax({ type: "POST", url: "getsite.php", data:'city='+val, success: function(data){ $("#site").html(data); } }); } </script>（以获取数据）和脚本。

我让它起作用......有点......

当我选择国家，即：英格兰时，我会得到填充英语城市的下一个下拉列表，但是＆＃34; site＆＃34;下拉列表不会填充，除非我手动更改城市下拉列表。

<select class="form-control" name="country" id="country" onChange="getCity(this.value);" required>

选择

<select class="form-control" name="city" id="city" onChange="getSite(this.value);" required>

和

{{1}}

Answer 1

更新： javascript中有三个错误。

1。首先调用正确的函数;编辑该行：

        });getsite();

为：

        });getSite();

2. 然后，请确保将城市名称作为参数传递：

        });getSite($("#city").val());

或编辑函数本身以在触发ajax请求之前查找它，方法是修改以下行：

        data:'city='+val,

成为：

        data:'city='+$("#city").val(),

3。实际上，在发出ajax请求后立即调用getSite()，之前返回结果。它必须在success函数内移动：

success: function(data){ $("#city").html(data); getSite($("#city").val()); } });

测试：以下代码示例执行了询问的内容（我没有费心重新创建php文件）：

<html><head> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> </head><body> <script> function getCity(val) { var data = '<option value="London">London</option><option value="Manchester">Manchester</option>"'; $("#city").html(data); getSite($("#city").val()); } function getSite(val) { if (val == 'London') { var data = '<option value="Westminster Abbey">Westminster Abbey</option><option value="Piccadilly Circus">Piccadilly Circus</option>"'; } else if (val == 'Manchester') { var data = '<option value="Old Trafford">Old Trafford</option><option value="Heaton Park">Heaton Park</option>"'; } $("#site").html(data); } </script> Country:<select class="form-control" name="country" id="country" onChange="getCity(this.value);" required> <option value="Belize">Belize</option> <option value="England">England</option> </select> City: <select class="form-control" name="city" id="city" onChange="getSite(this.value);" required></select> Site: <select class="form-control" name="site" id="site" required></select> </body></html>

Answer 2

确定。问题解决了。

我改变了一点方法：

脚本

    <script type="text/javascript">
    $(document).ready(function(){
        $('#country').on('change',function(){
            var countryID = $(this).val();
            if(countryID){
                $.ajax({
                    type:'POST',
                    url:'getcountrycitysite.php',
                    data:'country='+countryID,
                    success:function(html){
                        $('#city').html(html);
                        $('#site').html('<option value="">Select city first</option>');
                    }
                });
            }else{
                $('#city').html('<option value="">Select country first</option>');
                $('#site').html('<option value="">Select city first</option>');
            }
        });

        $('#city').on('change',function(){
            var cityID = $(this).val();
            if(cityID){
                $.ajax({
                    type:'POST',
                    url:'getcountrycitysite.php',
                    data:'city='+cityID,
                    success:function(html){
                        $('#site').html(html);
                    }
                });
            }else{
                $('#site').html('<option value="">Select city first</option>');
            }
        });
    });
</script>

（...）

<div class="form-group">
   <label>Country</label>
   <select class="form-control" name="country" id="country" required>
      <option disabled selected value> -- select an option -- </option>
      <?php
         require_once ("settings.php");

         $link = @mysqli_connect($dbhostname, $dbusername, $dbpassword, $dbname);
         $query = "SELECT * FROM country";

         if (mysqli_query($link, $query)) {
             $result = mysqli_query($link, $query);
             while ($row = mysqli_fetch_array($result)) {
                 echo '<option value = '.$row["id"].'>'.$row["country"].'</option>';
             }
         } else {
             echo "blah";
         }

         mysqli_close($link);
         ?>
   </select>
</div>
<div class="form-group">
   <label>City</label>
   <select class="form-control" name="city" id="city" required>
      <option disabled selected value> -- select an option -- </option>
   </select>
</div>
<div class="form-group">
   <label>Site</label>
   <select class="form-control" name="site" id="site" required>
      <option disabled selected value> -- select an option -- </option>
   </select>
</div>

（...）

如你所见，我删除了onChange =＆＃34; getCity（this.value）;选择并创建一个PHP脚本来获取城市和站点值：

<?php
require_once("settings.php");

if (isset($_POST["country"]) && !empty($_POST["country"])) {

    $link       = @mysqli_connect($dbhostname, $dbusername, $dbpassword, $dbname);
    $query      = 'SELECT * FROM city WHERE idcountry = ' . $_POST["country"];
    $resultcity = mysqli_query($link, $query);

    $rowcnt = mysqli_num_rows($resultcity);


    if ($rowcnt > 0) {
        echo '<option value="">Select City</option>';
        while ($row = mysqli_fetch_array($resultcity)) {
            echo '<option value="' . $row['id'] . '">' . $row['city'] . '</option>';
        }
    } else {
        echo '<option value="">City not Available</option>';
    }
}

if (isset($_POST["city"]) && !empty($_POST["city"])) {

    $link       = @mysqli_connect($dbhostname, $dbusername, $dbpassword, $dbname);
    $query      = 'SELECT * FROM site WHERE idcity = ' . $_POST["city"];
    $resultsite = mysqli_query($link, $query);

    $rowcnt = mysqli_num_rows($resultsite);


    if ($rowcnt > 0) {
        echo '<option value="">Select site</option>';
        while ($row = mysqli_fetch_array($resultsite)) {
            echo '<option value="' . $row['id'] . '">' . $row['site'] . '</option>';
        }
    } else {
        echo '<option value="">Site not available</option>';
    }
}
?>

Answer 3

https://github.com/nfosci/input-fetcher-dropdown提供了解决此问题的选项。

三个动态下拉列表

3 个答案: