Заполнение элемента списком штатов или городов на основе значения параметра страны, выбранного пользователем в раскрывающемся списке, является очень распространенной реализацией 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 для хранения записей о стране и городе в демонстрационных целях. Однако в реальном сценарии вам необходимо хранить эти значения в базе данных.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.