使用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根據以前的選擇更改表單輸入選項

回答

相關問題