Заполнение элемента списком штатов или городов на основе значения параметра страны, выбранного пользователем в раскрывающемся списке, является очень распространенной реализацией Ajax-функции, которую вы видели на многих веб-сайтах при заполнении регистрационной формы. Вы можете легко сделать это с помощью jQuery-метода ajax() и любого серверного языка, например PHP.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "process-request.php",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Страна:</label>
<select class="country">
<option>Выбрать</option>
<option value="usa">Соединенные Штаты</option>
<option value="india">Индия</option>
<option value="uk">Великобритания</option>
</select>
</td>
<td id="response">
<!-- ответ от сервера будет вставлен здесь -->
</td>
</tr>
</table>
</form>
</body>
</html>Приведенный выше jQuery-скрипт отправляет на сервер значение параметра, выбранного в раскрывающемся списке страны. Затем файл process-request.php на сервере обрабатывает запрос. Если запрос завершается успешно, jQuery-скрипт получает возвращенные данные и создает раскрывающийся список городов.
PHP-код внутри файла process-request.php будет выглядеть примерно так:
<?php
if(isset($_POST["country"])){
// Получаем выбранную страну
$country = $_POST["country"];
// Определить массив страны и города
$countryArr = array(
"usa" => array("New York", "Los Angeles", "California"),
"india" => array("Mumbai", "New Delhi", "Bangalore"),
"uk" => array("London", "Manchester", "Liverpool")
);
// Отображать раскрывающийся список города в зависимости от названия страны
if($country !== 'Select'){
echo "<label>Город:</label>";
echo "<select>";
foreach($countryArr[$country] as $value){
echo "<option>". $value . "</option>";
}
echo "</select>";
}
}
?>Мы создали простой массив PHP для хранения записей о стране и городе в демонстрационных целях. Однако в реальном сценарии вам необходимо хранить эти значения в базе данных.
