طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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


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

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

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

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

 

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

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

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

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

 

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

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

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

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

حتما بخوانید  ساخت منو کشویی jQuery

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

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

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

حتما بخوانید  متد clone در jQuery (اضافه کردن المنت HTML)

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

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

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

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

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

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

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

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

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

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

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

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

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

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه