使用 AJAX 根据先前的选择更改表单输入选项答案

【问题标题】：Using AJAX to Change Form Input Options Based on Previous Selection使用 AJAX 根据先前的选择更改表单输入选项
【发布时间】：2012-02-02 16:46:48
【问题描述】：

我的页面上有一个表单，其中包含两个选择下拉菜单。第一个让用户选择一个国家，第二个让用户从那个国家选择一个城市。我希望根据先前选择的国家/地区填充第二个下拉选项。目前，我有一个 onChange 事件，该事件导致一个 AJAX 脚本，该脚本从外部 php 文件填充城市。到目前为止，这是我的代码：

HTML 表单

<form method="post">
<select name="country" onchange="dynamic_Select('city.php', this.value)" />
<option value="#">-Select-</option>
<option value="India">India</option>
<option value="USA">USA</option>
</select>

<div id="txtResult">
<select name="cityList">
<option></option>
</select>
</div>
</form>

标头中的 AJAX 脚本（动态选择）

<script>
function dynamic_Select(ajax_page, country) {
$.ajax({
type: "GET",
url: ajax_page,
data: "ch=" + country,
dataType: "text/html", //<--UPDATE: DELETING THIS LINE FIXES EVERYTHING
//<--UPDATE2: DON'T DELETE; REPLACE "test/html" with "html"
success: function(html){       $("#txtResult").html(html);     }
}); 
}
</script>
//I also have a link to the jquery file
<script src="js/jquery.js" type="text/javascript"></script>

外部 PHP 文件 (city.php)

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

// List of cities for India
if ($_GET['ch'] == 'India') {
?>
<select name="cityList">
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
<option value="Bangalore">Bangalore</option>
<option value="Patna">Patna</option>
</select>
<?php
}
// List of cities for USA
if ($_GET['ch'] == 'USA') {
?>
<select name="cityList">
<option value="Albama">Albama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Florida">Florida</option>
</select>
<?php
}
?>

上面的代码集不起作用，我不知道为什么。页面上出现两个下拉列表（第二个最初为空白），但从第一个下拉列表中选择国家后，第二个下拉列表保持空白。任何帮助将不胜感激！

【问题讨论】：

所以在玩了一会儿之后，我随机决定删除“dataType：”text/html“”这一行，并修复了它。我仍然不知道为什么，所以如果有人知道，请告诉我！

标签： php ajax forms dynamic drop-down-menu

【解决方案1】：

将 dataType 参数从“text/html”更改为“html”。

【讨论】：

我刚刚意识到你发布的内容。我知道 AJAX，所以我的脑海中仍然有 html 语法。不知道我在想什么。无论如何，这解决了这个问题。谢谢！
看起来你在考虑 MIME ;)

【解决方案2】：

另外，你可以缩短所有这些：

function dynamic_Select(ajax_page, country) {
  $.ajax({
    type: "GET",
    url: ajax_page,
    data: "ch=" + country,
    dataType: "text/html", //<--UPDATE: DELETING THIS LINE FIXES EVERYTHING
//<--UPDATE2: DON'T DELETE; REPLACE "test/html" with "html"
    success: function(html){       $("#txtResult").html(html);     }
  }); 
}

收件人：

function dynamic_Select(ajax_page, country) {
  $.get(ajax_page, {ch: country}, function(h) {
    $('#txtResult').html(h);
  });
}

【讨论】：