Question

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

例如，如果您从下拉菜单中选择新泽西，则其左侧的下拉菜单应显示三个城市：Newark，Bloomfield和Edison。

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

您可以在此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而是添加选项，它应该工作。

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);
  }
}

Ajax，多个下拉菜单

2 个答案: