Выпадающее меню «Страна-регион» - это раскрывающееся меню на основе JavaScript, которое позволяет пользователю легко реализовать список стран-регионов. Названия регионов автоматически обновляются и заполняются в зависимости от выбранной страны. И реализация проста, вам просто нужно отредактировать несколько строк кода, введя предварительно определенное имя и атрибут класса в раскрывающееся меню страны и региона соответственно, чтобы заставить их работать. Кроме того, есть еще несколько параметров, которые пользователь может настроить, чтобы раскрывающийся список выглядел потрясающе, например, выбор страны по умолчанию, значок флага и так далее.
Однако это раскрывающееся меню с открытым исходным кодом поддерживает только уровень региона. Данные о городах не были доступны в этой бесплатной версии. И это руководство покажет вам пошаговые инструкции, как добавить раскрывающийся список городов в раскрывающееся меню страны и региона.
- Получите и загрузите базу данных крупных городов мира с сайта https://www.geodatasource.com/software/world-major-cities-drop-down-list-source-codes
- Разархивируйте загруженный файл GEODATASOURCE-WORLD-MAJOR-CITIES-SOURCE-CODES.ZIP.
- Импортируйте базу данных в базу данных MySQL. Примечание. См. Файл sql в распакованном файле.
- Загрузите раскрывающееся меню страны и региона по адресу https://github.com/geodatasource/country-region-dropdown-menu
- Запустите следующий код на своем сайте.
<?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 г.