Выпадающее меню «Страна-регион» - это раскрывающееся меню на основе JavaScript, которое позволяет пользователю легко реализовать список стран-регионов. Названия регионов автоматически обновляются и заполняются в зависимости от выбранной страны. И реализация проста, вам просто нужно отредактировать несколько строк кода, введя предварительно определенное имя и атрибут класса в раскрывающееся меню страны и региона соответственно, чтобы заставить их работать. Кроме того, есть еще несколько параметров, которые пользователь может настроить, чтобы раскрывающийся список выглядел потрясающе, например, выбор страны по умолчанию, значок флага и так далее.

Однако это раскрывающееся меню с открытым исходным кодом поддерживает только уровень региона. Данные о городах не были доступны в этой бесплатной версии. И это руководство покажет вам пошаговые инструкции, как добавить раскрывающийся список городов в раскрывающееся меню страны и региона.

  1. Получите и загрузите базу данных крупных городов мира с сайта https://www.geodatasource.com/software/world-major-cities-drop-down-list-source-codes
  2. Разархивируйте загруженный файл GEODATASOURCE-WORLD-MAJOR-CITIES-SOURCE-CODES.ZIP.
  3. Импортируйте базу данных в базу данных MySQL. Примечание. См. Файл sql в распакованном файле.
  4. Загрузите раскрывающееся меню страны и региона по адресу https://github.com/geodatasource/country-region-dropdown-menu
  5. Запустите следующий код на своем сайте.
<?php
$mydbusername = "[your username]";
$mydbpassword = "[your password]";
$mydbserver = "localhost";

$conn = new mysqli($mydbserver, $mydbusername, $mydbpassword);

if (!$conn) {
  die('Could not connect: ' . $conn->connect_error);
}

$conn->select_db("countrystatecitydb") or die('Could not select database');

$conn->query("SET NAMES 'utf8'");

$sqlStr = "SELECT STATE, GROUP_CONCAT(CITY_NAME SEPARATOR '| ') AS CITY FROM countrystatecity
WHERE STATE != '-'
GROUP BY STATE";

$rs1 = $conn->query($sqlStr);

if (!$rs1) {
  die('Query Error: ' . $conn->error);
}

?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Country-Region DropDown Menu with Cities</title>
    <script src="dist/geodatasource-crc.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="dist/geodatasource-countryflag.css">
<?php
echo '<script type="text/javascript">';
echo 'var region_cities = {};';
while ($row = $rs1->fetch_assoc()) {
echo 'region_cities["' . $row["STATE"] . '"] = "' . $row["CITY"] . '";';
}
echo '</script>';
?>
  </head>
  <body>

    <h2>Country-Region DropDown Menu Example</h2>

    <div>
        <p>Example:</p>

        <p>
            Country: <select class="gds-cr" country-data-region-id="gds-cr-example"></select>

            Region: <select id="gds-cr-example" region-data-city-id="gds-cr-city_example" ></select>

            City: <select id="gds-cr-city_example" ></select>
        </p>
    </div>
  </body>
</html>
<?php
$conn->close();
?>

Вы сделали!

Первоначально опубликовано на https://www.geodatasource.com 27 августа 2018 г.