ساخت لیست آبشاری داینامیک با php و jquery

در این آموزش قصد داریم به شما نحوه ساخت لیست آبشاری (dropdown) چندگانه (multiple) داینامیک با php و jquery ، ajax و mysql را نشان بدیم .

ساخت لیست آبشاری داینامیک بیشتر برای نمایش لیست های انتخابی استان و شهر استفاده می شود . بنابراین در آموزش ساخت لیست آبشاری داینامیک با php و jquery ، قصد پیاده سازی لیست بازشو ی کشور و استان توسط php و jquery ، ajax و mysql را داریم .

بر اساس تغییر کشور و استان (state) ، لیست های شهر (city) و استان state بدون آن که صفحه دوباره بارگذاری (refresh) شود ، با استفاده از php و jquery ، ajax و mysql از دیتابیس خوانده و بروزرسانی خواهند شد

در ابتدا ، لیست آبشاری کشور ، اسامی تمام کشور ها را نمایش خواهد داد . زمانی که یک کشور انتخاب شد ، استان های مورد نظر از دیتابیس mysql خوانده (fetch) و در لیست آبشاری استان نمایش خواهند داد . مشابه همان ، زمانی که استان دلخواه انتخاب شد ، همه شهر های مرتبط به آن از دیتابیس mysql خوانده و در لیست آبشاری شهرها نمایش داده می شود.

ساخت جداول دیتابیس

یک دیتابیس بالفرض location_db بسازید . location_db دارای سه جدول countries ، states و cities خواهد بود . جدول states یک relation با جدول countries و جدول cities یک relation با جدول states دارد . برای ربط دادن جدول ها به هم باید با مفاهیم پایه طراحی دیتابیس آشنا باشید . به هر حال سورس کامل آن در انتهای مقاله قابل دانلود خواهد بود .

جدول countries :

این جدول شامل تمام اطلاعات کشورها است . کوئری SQL ساخت جدول countries به صورت زیر است :

CREATE TABLE IF NOT EXISTS `countries` (
  `country_id` int(11) NOT NULL,
  `country_name` varchar(30) CHARACTER SET utf8 NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE IF NOT EXISTS `countries` (

`country_id` int(11) NOT NULL,

`country_name` varchar(30) CHARACTER SET utf8 NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

جدول states :

این جدول شامل تمام اطلاعات استان ها و یک فیلد country_id به عنوان FOEIGN_KEY است . کوئری SQL ساخت جدول states به صورت زیر است :

CREATE TABLE IF NOT EXISTS `states` (
  `state_id` int(11) NOT NULL,
  `state_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `country_id` int(11) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE IF NOT EXISTS `states` (

`state_id` int(11) NOT NULL,

`state_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,

`country_id` int(11) NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

جدول cities :

این جدول شامل تمام اطلاعات شهر ها و یک فیلد state_id به عنوان FOEIGN_KEY است . کوئری SQL ساخت جدول cities به صورت زیر است :

CREATE TABLE IF NOT EXISTS `cities` (
  `city_id` int(11) NOT NULL,
  `city_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `state_id` int(11) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE IF NOT EXISTS `cities` (

`city_id` int(11) NOT NULL,

`city_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,

`state_id` int(11) NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

فایل dbConfig.php

این فایل برای اتصال به دیتابیس mysql استفاده می شود . نحوه اتصال به دیتابیس mysql در php .

<?php
//db details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'location_db';

//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

<?php

//db details

$dbHost = 'localhost';

$dbUsername = 'root';

$dbPassword = '';

$dbName = 'location_db';

//Connect and select the database

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {

die("Connection failed: " . $db->connect_error);

}

فایل index.php

این فایل شامل کتابخانه jQuery و کد های javaScript ، HTML و PHP است .

کد جاواسکریپت زیر برای دریافت اطلاعات شهر و استان ها از فایل ajaxData.php به صورت اجکس استفاده شده است . همچنین ، خروجی HTML از فایل ajaxData.php را در لیست های انتخابی نمایش می دهد .

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#country').on('change',function(){
        var countryID = $(this).val();
        if(countryID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'country_id='+countryID,
                success:function(html){
                    $('#state').html(html);
                    $('#city').html('<option value="">Select state first</option>'); 
                }
            }); 
        }else{
            $('#state').html('<option value="">Select country first</option>');
            $('#city').html('<option value="">Select state first</option>'); 
        }
    });
    
    $('#state').on('change',function(){
        var stateID = $(this).val();
        if(stateID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'state_id='+stateID,
                success:function(html){
                    $('#city').html(html);
                }
            }); 
        }else{
            $('#city').html('<option value="">Select state first</option>'); 
        }
    });
});
</script>

$(document).ready(function(){

$('#country').on('change',function(){

var countryID = $(this).val();

if(countryID){

$.ajax({

type:'POST',

url:'ajaxData.php',

data:'country_id='+countryID,

success:function(html){

$('#state').html(html);

$('#city').html('<option value="">Select state first</option>');

}

});

}else{

$('#state').html('<option value="">Select country first</option>');

$('#city').html('<option value="">Select state first</option>');

}

});

$('#state').on('change',function(){

var stateID = $(this).val();

if(stateID){

$.ajax({

type:'POST',

url:'ajaxData.php',

data:'state_id='+stateID,

success:function(html){

$('#city').html(html);

}

});

}else{

$('#city').html('<option value="">Select state first</option>');

}

});

</script>

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

از کد php و html زیر برای نمایش استان و شهر ها بر اساس کشور انتخابی استفاده شده است .

<?php
//Include database configuration file
include('dbConfig.php');

//Get all country data
$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;
?>
<select name="country" id="country">
    <option value="">Select Country</option>
    <?php
    if($rowCount > 0){
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
        }
    }else{
        echo '<option value="">Country not available</option>';
    }
    ?>
</select>

<select name="state" id="state">
    <option value="">Select country first</option>
</select>

<select name="city" id="city">
    <option value="">Select state first</option>
</select>

<?php

//Include database configuration file

include('dbConfig.php');

//Get all country data

$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");

//Count total number of rows

$rowCount = $query->num_rows;

<option value="">Select Country</option>

<?php

if($rowCount > 0){

while($row = $query->fetch_assoc()){

echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';

}

}else{

echo '<option value="">Country not available</option>';

}

</select>

<option value="">Select country first</option>

</select>

<option value="">Select state first</option>

</select>

فایل ajaxData.php

این فایل با درخواست اجکس اجرا می شود و در این فایل اطلاعات شهر یا استان بر اساس مقدار country_id یا state_id از دیتابیس خوانده می شود . همچنین در صورت اجرای موفق ، کد های HTML به تابع success اجکس برگشت داده می شود .

<?php
//Include database configuration file
include('dbConfig.php');

if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
    //Get all state data
    $query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");
    
    //Count total number of rows
    $rowCount = $query->num_rows;
    
    //Display states list
    if($rowCount > 0){
        echo '<option value="">Select state</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
        }
    }else{
        echo '<option value="">State not available</option>';
    }
}

if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
    //Get all city data
    $query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC");
    
    //Count total number of rows
    $rowCount = $query->num_rows;
    
    //Display cities list
    if($rowCount > 0){
        echo '<option value="">Select city</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
        }
    }else{
        echo '<option value="">City not available</option>';
    }
}
?>

<?php

//Include database configuration file

include('dbConfig.php');

if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){

//Get all state data

$query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");

//Count total number of rows

$rowCount = $query->num_rows;

//Display states list

if($rowCount > 0){

echo '<option value="">Select state</option>';

while($row = $query->fetch_assoc()){

echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';

}

}else{

echo '<option value="">State not available</option>';

}

if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){

//Get all city data

$query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC");

//Count total number of rows

$rowCount = $query->num_rows;

//Display cities list

if($rowCount > 0){

echo '<option value="">Select city</option>';

while($row = $query->fetch_assoc()){

echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';

}

}else{

echo '<option value="">City not available</option>';

}

با استفاده از آموزش ساخت لیست آبشاری داینامیک با php و jquery می توانید فرم های داینامیک و کاربر پسندی را ایجاد کنید . همچنین از این قابلیت می توانید برای پیاده سازی فرم های چند مرحله ای استفاده کنید . مطمینا در پروژه های خود از این قابلیت استفاده خواهید کرد چراکه باعث حرفه ای شدن امکانات پروژه شما خواهد شد .

برای دانلود سورس کد کامل ساخت لیست آبشاری داینامیک با php و jquery + دیتابیس از قسمت زیر اقدام کنید

هرگونه مشکلی در پیاده سازی کدها داشتید ، از قسمت نظرات اقدام کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

لغو پاسخ

محمد عقیق ۱۱ آبان ۱۴۰۰

سلام وقتتون بخیر
ما اگر بخوایم اطلاعات رو از api بگیریم و وارد dropdown منو کنیم. و بعد از انتخاب هر گزینه منو دوباره به api دیگه درخواست بدیم و اطلاعاتی که میاد رو بگیریم و توی جدولی در همون صفحه بریزیم امکانش هست با ajax انجام بشه ؟

پاسخ

حسن شفیعی ۱۲ آبان ۱۴۰۰

سلام ممنون.
بله میتونید این کارو انجام بدید

پاسخ

رقیه ۱۲ آذر ۱۳۹۹

با سلام خیلی ممنون از مطالب خوبتون
من میخام همه ی آپشن هایی که در ۵ تا سلکت انتخاب شده اند رو در سلکتی دیگر نشان دهم میشه راهنمایی کنید لطفا.

پاسخ

حسن شفیعی ۱۲ آذر ۱۳۹۹

سلام. خوشحالیم که مفید واقع شده.
از این آموزش استفاده کنید
https://netparadis.com/multi-select-dependent-dropdown-jquery-php/
موفق باشید.

پاسخ

رقیه ۱۳ آذر ۱۳۹۹

سلام خیلی ممنون از مطالب خوبتون
ولی ببینید من ۵ تا سلکت دارم با آپشن های برابر و اول میخام بگم که اگه آپشنی که در سلکت اولی انتخاب شد حق انتخاب در سلکت دومی را ندارد و دوم اینکه۵ تا آپشنی که از این پنج تا سلکت انتخاب میشود رو در یک سلکت جدید نشان دهم اونی که من میگم چند انتخابی نیسش نمیدونم منظورمو خوب رسوندم یا نه راهنمایی کنید لطفا خیلی ضروریه 🙁

پاسخ
حسن شفیعی ۱۳ آذر ۱۳۹۹

سلام. خوشحالیم که مفید واقع شده.
چنین چیزی رو نمیشه با توضیح یا راهنمایی یا دادن کد خاص بشه انجام داد. بدون دیدن کد اصلا نمیشه چیزی گفت باید به کسی که جی کویری مسلط هست بدید براتون انجام بدند

پاسخ
رقیه ۱۶ آذر ۱۳۹۹

بنظر شما پیاده سازی همچین چیزی فقط با php امکان پذیر هست؟

پاسخ
حسن شفیعی ۱۶ آذر ۱۳۹۹

خیر حتما باید از jquery کمک بگیرید

پاسخ

میلاد ۲۱ مهر ۱۳۹۹

باسلام
در قطعه کد بالا هنگام ارسال فرم به دیتابیس شماره id ها ارسال می شود و مثلا نام کشور و شهر ارسال نمیگردد بجای آن شماره مربوطه ارسال میگردد.
ممنون میشم راهنمایی کنید برای ارسال خود متن به دیتابیس چه تغییری را در کد js یا ajaxphp باید اعمال کرد.
سپاس

پاسخ

حسن شفیعی ۲۱ مهر ۱۳۹۹

سلام.
برای دریافت نام به جای آیدی اینجا var countryID = $(this).val(); به جای val() از html() استفاده کنید

پاسخ

میلاد ۲۱ مهر ۱۳۹۹

تشکر از پاسخ دهی
با تغییرات گفته شده هنگام انتخاب فیلد اول فیلد های دوم و سوم از دیتابیس فراخوانی نمیشن.بنظرم توی فایل ajaxdata.php هم باید تغییراتی اعمال بشه.تغییرات دیگه ای نباید داد؟

پاسخ
حسن شفیعی ۲۱ مهر ۱۳۹۹

در کد php در کویری های sql به جای country_id از country_name و مشابه آن برای state و cities ها استفاده کنید.

پاسخ
میلاد ۲۱ مهر ۱۳۹۹

سپاس به این ترتیب در داخل دیتابیس هم foreign key باید براساس name نوشته شود برای جداول وابسته.
یک سوال دیگ اگر بخواهیم با انتخاب یک کشور ۵ فیلد مجزا استان و ۵ فیلد مجزا شهر مربوطه قابل انتخاب باشه کد ایجکسش چجوری میشه؟ اگر امکانش هست توضیح بفرمایید

پاسخ
حسن شفیعی ۲۱ مهر ۱۳۹۹

این آموزش رو ببینید :
https://netparadis.com/city-selection-list-ajax-php

پاسخ
میلاد ۲۲ مهر ۱۳۹۹

در آموزش اشاره شده مطلبی درخصوص تعدد سلکت باکس ها(نه تعدد موارد انتخابی داخل سلکت باکس!)نیست.کد رو نمیخام ازتون در حد راهنمایی باشه کافیه

پاسخ

azad ۸ مهر ۱۳۹۸

سلام.وقت بخیر.بعد ازاینکه کاربر درنهایت از لیست ها شهر رو انتخاب کرد چگونه بعد از زدن دکمه سرچ(باتن) اطلاعات انتخابی کاربر را به صفحه دیگه منتقل کنیم تا بتونیم عمل سرچ رو انجام بدیم؟ با نوشتن کدی مثل [‘a=$_GET[‘state$ در صفحه سرچ کار نمیکنه و خطا میده…لطفا راهنماییم کنیم

پاسخ

حسن شفیعی ۹ مهر ۱۳۹۸

سلام. ممنون
باید کل این لیست های انتخابی را داخل یک تگ form با action=”file.php” و method=”GET” قرار بدید تا در فایل file.php بتونید بصورت $_GET[‘state’] این مقادیر را دریافت کنید؛
متغییر GET و POST در PHP
دریافت اطلاعات فرم در PHP
موفق باشید.

پاسخ

azad ۹ مهر ۱۳۹۸

خیلی ممنون

پاسخ

محمد ۲۰ خرداد ۱۳۹۸

سلام.ببخشید واسه قسمت دیتابیس فقط کپی کردن کدای ۳تا جدول کافیه یا باید کارای دیگه ای روش اجرا شه؟یکم رو ارتباط جدولا مشکل دارم ممنون میشم کمکم کنید

پاسخ

حسن شفیعی ۲۰ خرداد ۱۳۹۸

سلام. بله کافی است دیتابیس خود را ساخته و بعد با انتخاب آن کویری ها رو برای ساخت جدول اجرا کنید و بعد نام دیتابیس را در فایل کانفیگ تغییر بدید.
اگر به مشکل برخوردید سورس کامل را از باکس دانلود, دریافت و اجرا کنید.
موفق باشید.

پاسخ

محمد ۲۱ خرداد ۱۳۹۸

مرسی.ببخشید چرا جدولا primary key ندارن؟مشکلی پیش نمیاد بقیه جدولای دیتابیسمو هم طبق این queryها ایجاد کنم؟

پاسخ
حسن شفیعی ۲۱ خرداد ۱۳۹۸

چون عملیات insert روی این جداول نداریم برای همین نیاز به کلید نیست چراکه مقادیرشون ثابته مثلا لیست کشور یا استان ها تغییر نمیکنه.
اگر قصد اضافه کردن مواردی از طریق اسکریپت به این جدول داشتید باید کلید ایجاد کنید در غیر اینصورت نیاز نیست.
موفق باشید.

پاسخ
محمد ۲۱ خرداد ۱۳۹۸

آها مرسی

پاسخ

fatemeh ۱۷ شهریور ۱۳۹۷

سلام
واقعا عالی بود اجرتون با اقا امام زمان

پاسخ

حسن شفیعی ۱۷ شهریور ۱۳۹۷

سلام . خوشحالم مفید واقع شده . موفق باشید.

پاسخ

arman ۳ تیر ۱۳۹۷

مهدس عالی بود البته خیلی کدای php به کارم نیومد ولی تو لاراول خیلی تونستم خوب درش بیارم ممنونم

پاسخ

حسن شفیعی ۳ تیر ۱۳۹۷

سلام . خواهش می کنم. خوشحالم که مفید واقع شده . موفق باشید.

پاسخ

ساخت لیست آبشاری داینامیک با php و jquery

ساخت جداول دیتابیس

جدول countries :

جدول states :

جدول cities :

فایل dbConfig.php

فایل index.php

فایل ajaxData.php

دانـلود باکــس

اکسپورت مخاطبان بصورت vCard با PHP

ساخت لیست باکس چند انتخابی با jQuery و PHP

ساخت لیست آبشاری به همراه چک باکس با jQuery

ساخت منو ریسپانسیو با jQuery و CSS

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه