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

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

لیست آبشاری multi-select همان لیست باکس های چند انتخابی هستند که مقادیر آنها وابسته به یک لیست آبشاری (dropdown) دیگر است که بصورت داینامیک بر اساس انتخاب کاربر, لود می شوند.

داده بر اساس گزینه های لیست کرکره ای (آبشاری) بارگذاری و داخل یک فیلد ورودی دیگر قرار می گیرند.

در مثال های قبلی نحوه انتخاب شهر بر اساس استان را بصورت ajax دیدیم. در این مثال, قصد داریم نحوه ساخت لیست باکس چند انتخابی بر اساس مقادیر انتخابی کاربر در یک لیست dropdown دیگر را به شما نمایش بدیم.

 

در این مثال, یک لیست کشور را در dropdown چند انتخابی داریم. با انجام تغییر (انتخاب) روی این لیست آبشاری, ajax جی کوئری را برای ارسال درخواست به فایل php فراخوانی می کنیم.

در کد php , نام کشورهای انتخابی و ارسال شده توسط درخواست اجکس را دریافت می کنیم. براساس کشور انتخابی, به دیتابیس متصل و ایالت های آن را از جدول مربوطه واکشی (fetch) می کنیم.

همچنین می توانیم چندین مقدار را از لیست کشور انتخاب و مقادیر آن را به صورت یک آرایه در درخواست ajax ارسال کنیم.

من نام کشور ها را جدا کرده و در یک دستور MySQL IN این مقادیر را به کوئری SELECT پاس دادم.

 

اسکریپت دیتابیس

اسکریپت SQL زیر شامل دستور ساخت جداول و قرار دادن داده های مربوط به جدول هایcountry,states است.

کد HTML ساخت لیست باکس چند انتخابی

در کد HTML زیر, لیست آبشاری کشور و ایالت ها را مشخص کردیم. لبست باکس کشور در شروع کار لیست کشورها را از دیتابیس خوانده و نمایش می دهد درحالی که لیست ایالت ها هنوز خالی است.

زمانی که یکی از گزینه های لیست آبشاری کشور انتخاب می شود, تابع جی کوئری getState() را صدا می زنیم. نتیجه این درخواست AJAX شامل لیست ایالت هایی است که بصورت داینامیک در لیست آبشاری دوم قرار میگیرد.

تابع جی کویری برای ساخت لیست باکس چند انتخابی با AJAX

اسکریپت jQuery زیر شامل تابع getState() برای انتخاب کشورها است. این تابع کشورهای انتخاب را در یک حلقه تکرار از همدیگر  جدا کرده و بصورت رشته جداسازی شده با کاما (,) قرار می دهد.

این رشته به کد PHP پاس داده می شود تا در یک کوئری SELECT برای واکشی نتایج ایالت ها استفاده شود. نتیجه نهایی در قالب HTML به مرورگر بازگشت داده می شود تا داخل لیست دوم قرار بگیرد.

کد PHP برای fetch کردن داده های دیتابیس

در این کد php , لیست کشورها دریافت و در کوئری SELECT به منظور دریافت ایالت ها استفاده میشود. اگر کاربر چندین کشور را انتخاب کرده باشد پس ورودی کاربر بصورت یک رشته جدا شده با کاما دریافت می شود.

این رشته تکه تکه شده, در کوئری SQL توسط دستور IN استفاده می شود. نتیجه داده های ایالت ها در یک حلقه برای ساخت کد HTML <option> استفاده میشود.

این کد HTML به عنوان خروجی به AJAX برگشت داده میشود تا UI صفحه را بروزرسانی کند.

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

اسکرین شات زیر به شما خروجی مثال ساخت لیست باکس چند انتخابی با jQuery و PHP را نشان می دهد.

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

امیدوارم از آموزش ساخت لیست باکس چند انتخابی با jQuery و PHP نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    دانلود رایگان کتاب آموزش PHP

    صفر تا صد PHP و MySQL را یکجا یاد بگیرید
    همین الان دانلود کن
    نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
    close-link