Ajax，多个下拉菜单

Question

I'm trying to create a program that when you select a state from the drop down menu, it will display the list of cities for that state in another drop down menu that you can select from. 我正在尝试创建一个程序，当您从下拉菜单中选择状态时，它将在另一个下拉菜单中显示该状态的城市列表，您可以从中选择。 After you choose your city and state, you type in an address, hit submit, and it will display the full address on a new php file. 选择城市和州后，输入地址，点击提交，它将在新的php文件中显示完整地址。

For example, if you select New Jersey from the drop down menu, the drop down menu to the left of it should display three cities: Newark, Bloomfield and Edison. 例如，如果您从下拉菜单中选择新泽西，则其左侧的下拉菜单应显示三个城市：Newark，Bloomfield和Edison。

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. 我现在的问题是我可以显示状态，但是当选择状态时，它没有在第二个下拉菜单中给我该城市的选项列表。 Any help is appreciated, thanks! 任何帮助表示赞赏，谢谢！

You can view this behavior at this link 您可以在此链接中查看此行为

select.php 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 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

Your ajax is "get" while you are checking if get_option was posted. 当您检查是否已发布get_option时，您的ajax是“get”。

Change it to 将其更改为

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

Answer 2

This is completely wrong you cannot add array into innerHTML instead add options to the select and it should work. 这是完全错误的，你不能将数组添加到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 个解决方案

解决方案1
0 2017-04-30 21:41:32

解决方案2
0 2017-04-30 21:44:18

Ajax，多个下拉菜单

问题描述

2 个解决方案

解决方案1 0 2017-04-30 21:41:32

解决方案2 0 2017-04-30 21:44:18

解决方案1
0 2017-04-30 21:41:32

解决方案2
0 2017-04-30 21:44:18