Использование AJAX для изменения параметров ввода формы на основе предыдущего выбора

Question

На моей странице есть форма, которая содержит два выпадающих списка. Первый позволяет пользователю выбрать страну, а второй позволяет пользователю выбрать город из этой страны. Я хотел бы, чтобы во втором раскрывающемся списке были указаны города, основанные на ранее выбранной стране. В настоящее время у меня есть событие 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-скрипт в заголовке (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
}
?>

Приведенный выше код не работает, и я не могу понять, почему. На странице отображаются два раскрывающихся списка (второй изначально пуст), но после выбора страны из первого раскрывающегося списка второй остается пустым. Любая помощь будет высоко ценится!

Answer 1

Измените параметр dataType с «text / html» на «html».

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