Ajax，多个下拉菜单

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: 'get',
 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 value='".$row['state']."'>".$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 = $_GET['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

当你检查get_option是否发布时，你的ajax是"get“。

将其更改为

if(isset($_GET['get_option']))

Answer 2

这是完全错误的，您不能将数组添加到innerHTML中，而是将选项添加到select中，它应该可以工作。

success: function (response) {
  var select = document.getElementById("new_select"); 
  for (var i from response){
      var opt = document.createElement('option');
      opt.value = response[i];
      opt.innerHTML = response[i];
      select.appendChild(opt);
  }
}