Связанные выпадающие списки select с использованием jQuery + MySQL + PHP без перезагрузки страницы

Связанные выпадающие списки select без перезагрузки страницы, с использованием jQuery + MySQL + PHP, на примере выбора стран, регионов и городов

Связанные выпадающие списки select с использованием jQuery + MySQL + PHP без перезагрузки страницы
7 месяцев назад

Связанные выпадающие списки select с использованием jQuery + MySQL + PHP без перезагрузки страницы

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

При выборе страны, будем подгружать список регионов, а при выборе регионов, будет раскрывать список городов. На основе данного метода, возможно создания неограниченного количество связанных между собой выпадающих списков. Данные будем брать из базы данных mysql.

Изначально списки select будут отсутствовать, за исключением первого - выбора страны, а при выборе значения первого, будем раскрывать значения последующих и т. д.

Для начала подключаемся к базе данных и получаем данные первого списка select со странами, а при выборе из списка основного формируем последующие.
demo.php
<div class="container">

<div>
   <label class="prefix" for="get_country">Страна:</label>
   <select id="get_country" name="get_country">
    <option value="">выберите страну</option>
    <?php
      require_once("db.php");

      $result = mysql_query("SELECT * FROM country");
      while ($row = mysql_fetch_array($result))
      {
         echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
      }
    ?>
   </select>
</div>

<div id="sub_region">
    <label class="prefix" for="get_region">Регион:</label>
    <select id="get_region" name="get_region"></select>
</div>

<div id="sub_city">
   <label class="prefix" for="get_city">Город:</label>
   <select id="get_city" name="get_city"></select>
</div>

</div>
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html{
  height: 100%;
}

body{
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color:#474d59;
  margin: 0; 
  padding: 0;
}

.container {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
}

@media (min-width:568px) {
  .container {
    width: 538px;
  }
}

@media (min-width:970px) {
  .container {
    width: 940px;
  }
}

.container:after {
  display : table;
  content : " ";
  clear : both;
}

label {
  font-weight: 900;
  width: 100px;
  padding: 5px 10px 5px 0;
  display:inline-block;
  text-align: right;
  color: #000;
}

.container > div {
  padding: 7px 0;
  margin: 5px 0;
  text-align: center;
}

.container > div:first-child {
  border-top: 0 none;
}

select {
  width: 350px;
  background: #fff url("img/arrow_down.png") no-repeat 98% center;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  padding: 7px;
  border: 1px solid #e8e8e8;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

@media (max-width:668px) {
  select {
    width: 100%;
  }

  label{
    width: 100%;
    text-align: left;
  }
}

option {
  color: #000;
}

select:required:invalid {
  color: #a9a9a9;
}

*::-webkit-input-placeholder {
  color: #a9a9a9;
}

*:-moz-placeholder {
  color: #a9a9a9;
}

*::-moz-placeholder {
  color: #a9a9a9;
}

*:-ms-input-placeholder {
  color: #a9a9a9; 
}
db_inc.php
<?php

$db_host = "localhost";
$db_user = "root";
$db_password = "";
$db_base = "dbname";

$link = mysql_connect($db_host, $db_user, $db_password) or die("Ошибка соединения: " . mysql_error());
mysql_select_db($db_base);

mysql_set_charset('utf8',$link);

?>
get_region.php
<?php

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
 
require_once("db.php");


$result = mysql_query("SELECT * FROM region WHERE `country_id`='".$_POST["country"]."' ");

   echo"<option value=''>выберите регион</option>";

while ($row = mysql_fetch_array($result))
{
   echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
}

}

?>
get_city.php
<?php

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

require_once("db.php");


$result = mysql_query("SELECT * FROM city WHERE `region_id`='".$_POST["region"]."' ");

   echo"<option value=''>выберите город</option>";

while ($row = mysql_fetch_array($result))
{
    echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
}

}

?>
geo.js
$(document).ready(function () {

$('#sub_region').css('display', 'none');
$('#sub_city').css('display', 'none');

$("#get_country").change(function() {
		clearlist();
		$('#sub_city').css('display', 'none');		
		var countryvalue = $("#get_country option:selected").val();
		//if (countryvalue === '') {clearlist(); }
		if (countryvalue === '') {clearlist(); $('#sub_region').css('display', 'none');  }
		getarea();
	})
//getarea();
//getcity();

function getarea() {
	var country_value = $("#get_country option:selected").val();
	var p_id = $("#page_id").val();
	var area = $("#get_region");
	var getarea_value = area.val();
	if (country_value === "") {
		area.attr("disabled",true);
	} else {
		area.attr("disabled",false);
		area.load('get_region.php',{country : country_value, page_id : p_id});
		$('#sub_region').css('display', 'block');
	}
	
	$("#get_region").change(function() {
		getcity();	
	})
	
	
}

function getcity() {
	// var region_value = $("#region_id").val();

	var region_value = $("#get_region option:selected").val();
	if(region_value == undefined)
	{
		var region_value = $("#region_id").val();
	}
	var p_id = $("#page_id").val();
	var area = $("#get_city");
	if (region_value === "") {
		area.attr("disabled",true);
		$('#sub_city').css('display', 'none');
		$("#get_city").empty();
	} else {
		area.attr("disabled",false);
		area.load('get_city.php',{region : region_value, page_id : p_id});
		$('#sub_city').css('display', 'block');
	}
}

function clearlist() {
	$("#get_region").empty();
	$("#get_city").empty();

}	


});	
mysql.sql
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;


CREATE TABLE `city` (
  `id` int(5) NOT NULL,
  `region_id` int(5) NOT NULL,
  `name` varchar(255) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `city` (`id`, `region_id`, `name`) VALUES
(1, 1, 'Москва'),
(2, 1, 'Абрамцево'),
(3, 1, 'Алабино'),
(4, 1, 'Апрелевка'),
(5, 1, 'Архангельское'),
(6, 2, 'Санкт-Петербург'),
(7, 2, 'Александровская'),
(8, 3, 'Винница'),
(9, 3, 'Гайсин'),
(10, 4, 'Белгород-Днестровский'),
(11, 4, 'Одесса'),
(12, 5, 'Минск'),
(13, 5, 'Борисов'),
(14, 6, 'Бобруйск'),
(15, 6, 'Могилев');

CREATE TABLE `country` (
  `id` int(5) NOT NULL,
  `name` varchar(255) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `country` (`id`, `name`) VALUES
(1, 'Россия'),
(2, 'Украина'),
(3, 'Беларусь');

CREATE TABLE `region` (
  `id` int(5) NOT NULL,
  `country_id` int(5) NOT NULL,
  `name` varchar(255) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `region` (`id`, `country_id`, `name`) VALUES
(1, 1, 'Москва и Московская область'),
(2, 1, 'Санкт-Петербург и область'),
(3, 2, 'Виницкая область'),
(4, 2, 'Одесская область'),
(5, 3, 'Минская область'),
(6, 3, 'Могилевская область');


ALTER TABLE `city`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `country`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `region`
  ADD PRIMARY KEY (`id`);


ALTER TABLE `city`
  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;
ALTER TABLE `country`
  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
ALTER TABLE `region`
  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
1,2K
Демо Скачать
Комментарии
  • Дмитрий2 месяца назад
    Вопрос - как запретить раскрытие последующих select, если у выбранной категории-родителя отсутствует подчиненный список?nНапример Россия - Москва -
    Ответить
  • Сергей2 месяца назад
    В файле getcity.php закомментируйте строку

    #echo"<option value=''>выберите город</option>";

    В файле geo.js в функции getcity()

    Удалите строку $('#sub_city').css('display', 'block');

    Замените строку area.load('get_city.php',{region : region_value, page_id : p_id});

    на

    area.load("get_city.php", {region : region_value, page_id : p_id}, function(response, status, xhr) {
    if(response !== "")
    {
    $('#sub_city').css('display', 'block');
    }
    Ответить
    • Юрий1 неделя назад
      Сергей, можете добавить ещё пару функций? Если пользователь выбрал город c id1, то в следующем блоке главной страницы отобразить страницу city1.php, если выбрал город с id 2, то отобразить city2.php и т.д.. nИ если нету подчинённого списка, то отобразить region1.php, region2.php и т.д..
      Ответить

×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.