لیست کشویی وابسته در html

ایجاد لیست‌های کشویی وابسته بهم در html (با جاوااسکریپت)

سلام دوستان عزیز. امروز میخوام یه مسئله بسیار کاربردی و مهم در مورد لیست‌های کشویی وابسته در html رو آموزش بدم، که بنده شخصاً توی وبسایت های فارسی زبان ندیدم که این مسئله رو به صورت اصولی و استاندارد آموزش بدن.

لیست‌های کشویی وابسته یا select های وابسته بهم

خب یه توضیحی بدم: حتما تو بعضی فرم ها دیدین که مثلا از شما میخوان استان و شهرستان خودتون رو وارد کنید. شما در این نوع select ها باید اول استان رو انتخاب کنید تا بسته به انتخاب شما گزینه های select شهرستان فعال شه یا تغییر کنه.

نکته: باید بگم که این نوع لیست ها به کمک جاوااسکریپت ساخته میشن پس لازمه که شما از قبل با این زبان کمی (فقط یه کم!) آشنایی داشته باشین.

بریم سر اصل مطلب! 🙂 من اول کل کد مربوط به این کار رو مینویسم و بعد توضیح میدم.

خط ۱ تا ۶: یک لیست افتادنی (select) با آیدی car و گزینه های Volvo, Volkswagen, BMW ایجاد کردیم. ویژگی onchange رو هم برابر با تابع ChangeCarList() قرار دادیم تا با انتخاب هر یک از گزینه ها تابع جاوااسکریپتی که در زیر تعریفش کردیم فراخوانی بشه (یعنی همون اجرا بشه 😉 ).

خط ۸: یک لیست افتادنی (select) با آیدی carmodel ایجاد کردیم، که مدل های ماشین رو با توجه به انتخاب گزینه لیست بالایی در آن بریزیم.

خط ۱۰ تا ۳۲: کد های مربوط به جاوا اسکریپت یا همون اصل مطلب خودمون! که اونها رو درون تگ script قرار میدیم.

ایجاد لیست‌های کشویی وابسته با جاوا اسکریپت

خط ۱۱ تا ۱۴: یک متغیر از نوع آرایه به نام carsAndModels ایجاد کردیم، و اون رو در سه خط بعدی برای شرکت های خودرو سازی مختلف (همونطور که میبینید) مقدار دهی کردیم.

خط ۱۶ تا ۳۱: یک تابع به نام ChangeCarList() تعریف کردیم (هر بار که گزینه‌ای از لیست car انتخاب میکنیم این تابع اجرا میشه).

خط ۱۷: لیست کشویی (select) که آیدیش برابر با car هست رو انتخاب و در متغیری به نام carList قرار دادیم.

خط ۱۸: لیست کشویی (select) که آیدیش برابر با carmodel هست رو انتخاب و در متغیری به نام modelList قرار دادیم.

خط ۱۹: مقدار (value) گزینه انتخاب شده لیست car رو گرفتیم و در متغیری به نام selCar قرار دادیم.

خط ۲۰ تا ۲۲: حلقه ای نوشتیم تا تمام گزینه های (option) موجود در لیست carmodel رو حذف کنه.

خط ۲۳: با توجه به گزینه انتخاب شده لیست car ، آرایه مربوط به اون رو که در خط های ۱۲ تا ۱۴ تعریف کردیم، در متغیر cars قرار میدیم.

خط ۲۴ تا ۳۰: در این خطوط یک شرطی رو نوشتیم که بررسی میکنه اگر متغیر cars وجود داشت، با استفاده از حلقه for تمام مقدار های آرایه انتخاب شده رو به صورت یک گزینه (option) درون لیست کشویی carmodel میریزه و تمام.

به همین سادگی به همین خوشمزگی 😉

هر سوالی بود میتونید توی قسمت نظرات مطرح کنید تا بنده با جون و دل بهتون جواب بدم 🙂 در ضمن نظر هم یادتون نره چون باعث دلگرمی ما برای ادامه این راه میشه!

منبع: www.w3schools.com

2 دیدگاه در “ایجاد لیست‌های کشویی وابسته بهم در html (با جاوااسکریپت)

  1. سلام شرمنده من میخواستم این دو منو رو به ۵ منو افزایش بدم ، میشه یه خورده راهنماییم کنید ؟

    1. سلام دوست عزیز،
      وقتی میخوای ۵ تا فیلد رو بهم وابسته کنی یعنی در واقع نیاز هست که ۴ بار کد های جاوااسکریپت رو فراخوانی کنی (مثلا اینجا ما وقتی ۲ فیلد داریم فقط برای اولی نیاز که کد های جاوا اسکریپت فراخوانی بشه و مقادیر مربوطه رو تو فیلد دومی بریزه)

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

      اگه باز نیاز به کمک داشتی میتونی از پشتیبانی برنادیتا سوالت رو بپرسی 🙂
      آیدی تلگرام: https://t.me/bornadata/

دیدگاهتان را بنویسید

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