Question

我尝试创建一个程序，当您从下拉菜单中选择状态时，它会在另一个下拉菜单中显示该状态的城市列表，您可以从中选择。选择城市和州后，输入地址，点击提交，它将在新的php文件中显示完整地址。

我目前的问题是我可以显示状态，但是当状态被选中时，它没有在第二个下拉菜单中给我该城市的选项列表。感谢任何帮助，谢谢！

您可以在此link

查看此行为

select.php

<head>
<link rel="stylesheet" type="text/css" href="select_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<!DOCTYPE html>
<form action = "display.php">
<script type="text/javascript">


function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'fetch.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("new_select").innerHTML=response; 
 }
 });
}

</script>

</head>
<body>
<p id="heading">Address Generator</p>
<center>
<div id="select_box">
 <select onchange="fetch_select(this.value);">
  <option>Select state</option>


  <?php
  include (  "accounts.php"     ) ;
( $dbh = mysql_connect ( $hostname, $username, $password ) )
            or die ( "Unable to connect to MySQL database" );
print "Connected to MySQL<br>";
mysql_select_db( $project ); 

  $select=mysql_query("select state from zipcodes group by state");
  while($row=mysql_fetch_array($select))
  {
   echo "<option>".$row['state']."</option>";
  }
 ?>
 </select>

 <select id="new_select">
 </select>

<div id='2'> </div>
<br><br>
<input type = text name="address">Address
<br><br>
<input type = submit>

</form>

fetch.php

<?php
include(accounts.php);
if(isset($_POST['get_option']))
{
 ( $dbh = mysql_connect ( $hostname, $username, $password ) )
            or die ( "Unable to connect to MySQL database" );
print "Connected to MySQL<br>";
mysql_select_db( $project );


 $state = $_POST['get_option'];
 $find=mysql_query("select city from zipcodes where state='$state'");
 while($row=mysql_fetch_array($find))
 {
  echo "<option>".$row['city']."</option>";
 }
 exit;
}
?>

Answer 1

1）首先，您的州选项的值属性缺失

echo "<option value='".$row["state"]."'>".$row["state"]."</option>";

2）的实例包括（accounts.php）; accounts.php应该用双引号括起来

3）城市选项的价值属性缺失

echo "<option value='".$row["city"]."'>".$row["city"]."</option>";

4）而不是每次连接回声，最后像这样回复

$options="";
while($row=mysql_fetch_array($find))
 {
     $options.= "<option value='".$row["city"]."' >".$row["city"]."</option>";
  }

 echo $options;

警告!!!

警告mysql_query，mysql_fetch_array，mysql_connect等..扩展在PHP 5.5.0中已弃用，并且已在PHP 7.0.0中删除。相反，应该使用MySQLi或PDO_MySQL扩展。

Answer 2

我已经修改了一些代码。试图以优雅的方式去做。你写了太多多余的代码。您不需要<form>元素来执行请求的操作。无论如何，下面是修改后的代码。

<!DOCTYPE html>
<head>
    <title>Address Generator</title>
</head>
<body>
    <p id="heading">Address Generator</p>
    <center>
    <!-- <div id="select_box"> -->
    <select name="select_box" id="select_box">

        <?php
            include (  "accounts.php"     ) ;
            ( $dbh = mysql_connect ( $hostname, $username, $password ) ) or die ( "Unable to connect to MySQL database" );
            print "Connected to MySQL<br>";
            mysql_select_db( $project ); 
            $select=mysql_query("select state from zipcodes group by state");
            while($row=mysql_fetch_array($select))
            {
                echo "<option>".$row['state']."</option>";
            }
         ?>            
    </select>
    <select id="new_select">

    </select>
    <div id='2'> </div>
    <br><br>
    <input type = text name="address">Address
    <br><br>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#select_box').on('change', function() {
                var state = $(this).val();
                $.ajax({
                    url: 'fetch.php',
                    type: 'POST',
                    data: {state: state},
                    success: function(response)
                    {
                        var response = JSON.parse(response);
                        $('#new_select').find('option').remove();
                        var option = '';
                        $.each(response.cities, function(key, val) {
                          option = option + "<option value='" + val + "'>" + val + "</option>";
                        });
                          $('#new_select').append(option);
                    }
                });
            });
        });
    </script>
</body>

我在</body>标记结束之前添加了Jquery。这不会妨碍您当前的代码执行。但是你总是可以预加载它，但这个策略是为了以后的。
由于您不需要任何<form>元素，因此我已将其完全删除。您可以随时根据自己的方便添加它。
我在cities的{{1}}对象的response数组上运行循环。
使用fetch.php函数解析JSON数据。
您需要JSON.parse()您的json变量，它将存储相应的Citites数据。

我希望这会有所帮助。我们也欢迎任何进一步的询问。

阿贾克斯州，城市下拉菜单

2 个答案: