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

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

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脚本页眉（dynamic_Select）

<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 
} 
?>

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

来源

2012-01-04 Stone

所以玩了对于后一点，我随机决定删除行“数据类型：” text/html“，”，并修复它。我仍然不知道为什么，所以如果有人知道，请告诉我！ – Stone 2012-01-04 19:41:24

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

来源

2012-01-04 19:42:20 j08691

我只是意识到，因为你张贴。我知道AJAX，所以我仍然有HTML语法卡在我的脑海。不知道我在想什么。无论如何，这解决了这个问题。谢谢！ – Stone 2012-01-04 19:46:23

看起来像你在MIME中想;） – j08691 2012-01-04 19:49:38

此外，您可以缩短了这一切：

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

来源

2014-05-08 23:11:34 DevlshOne

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

回答

相关问题