Главная / Верстка сайта / Верстка сайта Создание выпадающего меню с помощью MySQL, PHP и JavaScript

Верстка сайта Создание выпадающего меню с помощью MySQL, PHP и JavaScript

В этой статье мы расскажем, как создать с помощью MySQL, JavaScript и PHP select выпадающий список. Также мы будем использовать AJAX для автоматического выбора из меню без необходимости обновлять страницу.

Создание выпадающего меню с помощью MySQL, PHP и JavaScript

В дальнейшем вам будет нужно сохранить следующие файлы в одну папку:

  • Dbconfig.php;
  • findCity.php;
  • findState.php;
  • index.php.

Структура базы данных

Следующий код создает необходимые таблицы для автоматического заполнения списка PHP MySQL select. Создайте базу данных и назовите ее “dropdownb”, а затем добавьте таблицы:

/* Создание таблицы для выбора страны */

CREATE TABLE `country` (
`id` int NOT NULL AUTO_INCREMENT,
`country` varchar(20) NOT NULL default »,
PRIMARY KEY (`id`)
)

/* Создание таблицы для выбора штата */

CREATE TABLE `state` (
`id` int NOT NULL AUTO_INCREMENT,
`countryid` int(4) NOT NULL,
`statename` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
)

/* Создание таблицы для выбора города */

CREATE TABLE `city` (
`id` int NOT NULL AUTO_INCREMENT,
`city` varchar(50) default NULL,
`stateid` int(4) default NULL,
`countryid` int(4) NOT NULL,
PRIMARY KEY (`id`)
)
/* Вставить значения в таблицу стран */

INSERT INTO `country` VALUES (1, США);
INSERT INTO `country` VALUES (2, Канада);
/* Вставить значения в таблицу штатов */

INSERT INTO `state` VALUES (1, 1, ‘Нью-Йорк’);
INSERT INTO `state` VALUES (2, 1, ‘Лос Анжелес’);
INSERT INTO `state` VALUES (3, 2, ‘Британская Колумбия’);
INSERT INTO `state` VALUES (4, 2, ‘Торонто’);
/* Вставить значения в таблицу городов */

INSERT INTO `city` VALUES (1, ‘Лос Анжелес’, 2, 1);
INSERT INTO `city` VALUES (2, ‘Нью-Йорк’, 1, 1);
INSERT INTO `city` VALUES (3, ‘Торонто’, 4, 2);
INSERT INTO `city` VALUES (4, ‘Ванкувер’, 3, 2);

DbConfig.php

Данный файл предназначен для соединения с базой данных MySQL, которая используется для заполнения в PHP выпадающего списка select:

<?php
$con = new mysqli(‘localhost’, ‘root’, »,"dropdowndb");
if ($con->connect_errno) {
die(‘Нет соединения: ‘ . $con->connect_error);
}

FindCity.php

Данный файл содержит код для получения ID страны и города по ссылке с помощью метода GET.

Затем генерируется SQL-запрос для получения всей необходимой информации из базы данных. Запрос будет посылаться циклически, чтобы охватить все данные. Результаты будут отображены в выпадающем списке PHP select:

<?php
include_once ‘dbConfig.php’;

$countryId=intval($_GET[‘country’]);
$stateId=intval($_GET[‘state’]);

$query="SELECT id,city FROM city WHERE countryid=’$countryId’ AND stateid=’$stateId’";
$result=$con->query($query);

?>
<select name="city">
<option>Выберите город</option>
<?php while($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
<option value=<?php echo $row[‘id’]?>><?php echo $row[‘city’]?></option>
<?php } ?>
</select>

FindState.php

Данный файл содержит код для вывода ID страны и города по ссылке с помощью метода GET, точно так же, как и предыдущий.

Затем, чтобы получить из базы данных список всех штатов, принадлежащих данной стране, генерируется SQL запрос. Результаты будут отображены в PHP выпадающем списке select:

<?php
include_once ‘dbConfig.php’;

$country=intval($_GET[‘country’]);

$query="SELECT id,statename FROM state WHERE countryid=’$country’";
$result=$con->query($query);

?>
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
<option>Select State</option>
<?php while ($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
<option value=<?php echo $row[‘id’]?>><?php echo $row[‘statename’]?></option>
<?php } ?>
</select>

Index.php

Следующий фрагмент кода предназначен для главной страницы, на которой будут размещены все три выпадающих PHP select. Также на этой странице размещен скрипт, позволяющий выполнять асинхронную загрузку данных.

Сначала скрипт запускает запрос на выборку данных из таблицы «Страны», и результаты отображаются в выпадающем меню. Затем, на основе выбора пользователя, будут сгенерированы все остальные значения выпадающего меню:

<?php
include_once ‘dbConfig.php’;
$query="SELECT * FROM country";
$result= $con->query($query);
?>
<html>
<head>
<title>Tutorial-24</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}

function getState(countryId) {

var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// Только в случае нажатия «ОК»
if (req.status == 200) {
document.getElementById(‘statediv’).innerHTML=req.responseText;
document.getElementById(‘citydiv’).innerHTML='<select name="city">’+
‘<option>Выберите город</option>’+
‘</select>’;
} else {
alert("Problem while using XMLHTTP:n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(countryId,stateId) {
var strURL="findCity.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// Только в случае нажатия «ОК»
if (req.status == 200) {
document.getElementById(‘citydiv’).innerHTML=req.responseText;
} else {
alert("Problem while using XMLHTTP:n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<center>
<table width="45%" cellspacing="0" cellpadding="0">
<tr>
<td width="75">Страна</td>
<td width="50">:</td>
<td width="150"><select name="country" onChange="getState(this.value)">
<option value="">Выберите страну</option>
<?php while ($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
<option value=<?php echo $row[‘id’]?>><?php echo $row[‘country’]?></option>
<?php } ?>
</select></td>
</tr>
<tr style="">
<td>State</td>
<td width="50">:</td>
<td ><div id="statediv"><select name="state" >
<option>Выберите штат</option>
</select></div></td>
</tr>
<tr style="">
<td>City</td>
<td width="50">:</td>
<td ><div id="citydiv"><select name="city">
<option>Выберите город</option>
</select></div></td>
</tr>

</table>
</center>
</form>
</body>
</html>

Бонус

Вы можете скачать исходники кода здесь.

Мы надеемся, что данная статья позволит вам создать собственное меню.

Перевод статьи “Create a dropdown list using MySQL, PHP & JavaScript” был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...