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

【问题标题】：Ajax State, City Drop Down Menu阿贾克斯州，城市下拉菜单
【发布时间】：2017-04-28 17:34:59
【问题描述】：

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

My issue at the moment is I can get the states displayed, but when the state is selected, it is not giving me the list of options for that city in the second drop down menu.任何帮助表示赞赏，谢谢！

你可以在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;
}
?>

【问题讨论】：

mysql_* 已弃用尝试使用 mysqli_*
ajax 响应返回什么可以用控制台查看
首先你的 state 选项的 value 属性缺少 echo "
并包含（accounts.php）； account.php 应该用双引号括起来
@JYoThI 我应该在哪里插入那行代码？如果这是一个愚蠢的问题，我深表歉意，但我在使用 AJAX 方面还很陌生

标签： php jquery ajax

【解决方案1】：

1)首先你的 state 选项的 value 属性丢失了

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

2) 包含(accounts.php); accounts.php 应该用双引号括起来

3) 并且城市选项的 value 属性缺失

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 扩展。

【讨论】：

谢谢！我已经完成了所有这些，但当我选择一个州时，城市下拉菜单仍然不会显示任何城市。例如，如果我选择“新泽西”，城市下拉菜单应该显示三个选项，“纽瓦克、布卢姆菲尔德、爱迪生”

【解决方案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> 元素，所以我已将其完全删除。您可以随时根据自己的方便添加它。
我正在从 fetch.php 获取的对象 response 的 cities 数组上运行一个循环。
使用JSON.parse()函数解析JSON数据。
你需要json_encode你的json变量，它将存储相应的citites数据。

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

【讨论】：