جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگمقالاتبرنامه نویسیآموزش ایجاد لیست کشویی وابسته به هم در HTML

آموزش ایجاد لیست کشویی وابسته به هم در HTML

27 دی 1400
ارسال شده توسط همیار من
برنامه نویسی ، دوره های رایگان ، مقالات
388 بازدید

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی یعنی ایجاد لیست کشویی وابسته به هم در HTML که مربوط به مباحث برنامه نویسی سمت کاربر می‌شود را آموزش دهیم که بنده در سایت‌های فارسی، آموزش کاملی در این مورد پیدا نکردم.

ایجاد لیست کشویی وابسته به هم در HTML

خب حتماً در بسیاری از سایت‌ها (خصوصاً سایت‌های سازمانی) مشاهده کرده‌اید که چندین لیست کشویی، به هم وابسته هستند. برای مثال می‌توان به انتخاب استان و شهر اشاره کرد. اگر دقت کرده باشید در این مدل انتخاب‌ها چندین لیست کشویی (drop-down) که ما در زبان html با تگ select آنها را پیاده سازی می‌کنیم، وجود دارد که گزینه (option) آنها به انتخاب قبلی شما بستگی دارد.

نکته: در این مقاله هر جا گفته شد “لیست کشویی” بدانید که منظور همان drop-down در html است که با تگ select پیاده سازی می‌شود.

اگر در مورد همان انتخاب استان و شهر دقت کنیم، متوجه خواهیم شد که ابتدا باید استان موردنظر را از لیست کشویی اول انتخاب کنیم، و بعد شهرها در لیست کشویی دوم فعال می‌شوند و می‌توانیم شهر موردنظر هم انتخاب کنیم. (یعنی گزینه های لیست کشویی دوم که شهرها هستند به لیست کشویی اول که انتخاب استان است بستگی دارد، یا به عبارت دیگر وابسته است)

حالا سؤال اینجاست که این انتخاب‌ها چگونه کار می‌کنند و پیاده سازی می‌شوند؟ طبیعتاً از زبان html برای ایجاد لیست‌های کشویی مدنظرمان استفاده می‌کنیم (با استفاده از تگ select). سپس با استفاده از زبان شیرین جاوا اسکریپت تشخیص می‌دهیم که انتخاب اول کاربر چه گزینه‌ای هست و گزینه‌های مربوطه را در لیست کشویی بعدی ظاهر می‌کنیم.

خیلی نگران نباشید چون سعی کرده‌ایم به ساده‌ترین شکل ممکن کدها را نوشته و خط به خط توضیح دهیم (به غیر از اینکه در قسمت نظرات همین پست برای رفع مشکلات در خدمت شما هستیم!).

ایجاد select های وابسته به هم در HTML

توجه: در مثال زیر ما دو لیست کشویی داریم که در اولی سه مقدار Volvo، Volkswagen و BMW را قرار دادیم و کاربر وقتی هرکدام از این گزینه‌ها را انتخاب کند در لیست کشویی دوم چندین مدل از خودرو‌های آن شرکت ظاهر میشود.

قدم اول: ابتدا لیست های کشویی را مطابق کد زیر ایجاد می‌کنیم، دقت داشته باشید که فقط در select اول گزینه (option) وجود دارد و قرار است که در select دوم بسته به انتخاب شما در select اول گزینه‌ها بارگذاری شوند.

1
2
3
4
5
6
7
8
<select id="car" onchange="ChangeCarList()">
<option value="">-- Car --</option>
<option value="VO">Volvo</option>
<option value="VW">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
 
<select id="carmodel"></select>

نکته: در select اول یک خصیصه به نام onchange وجود دارد که در واقع وقتی که کاربر گزینه‌ای را انتخاب می‌کند تابع درونش یعنی ()ChangeCarList که یک تابع جاوا اسکریپت هست فراخوانی می‌شود. (در ادامه متوجه خواهید شد که چرا این کار را انجام دادیم)

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


شاید این مطالب را دوست داشته باشید:

  • ساخت اسلایدر در بوت‌استرپ ۴
  • راهنمای قرار دادن نقشه گوگل در سایت
  • آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4
  • آموزش کار با ستون ها در CSS3

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
 
function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}
</script>

توضیح خط به خط کدهای بالا:

خط ۲ تا ۵: یک آرایه دو بعدی با نام carsAndModels تعریف می‌کنیم و کلید (key) هر خانه را برابر گزینه های select اول (نام کمپانی‌ها) قرار می‌دهیم و در مقدار (value) هر خانه مقادیری را که قصد داریم با انتخاب کلید (key) آن خانه در select اول، درون select دوم بارگذاری شوند را قرار می‌دهیم (مدل خودرو‌ها). (شاید برای افرادی که با جاوااسکریپت آشنایی ندارند درک کدهای بالا کمی سخت باشد ولی خب چاره‌ای نیست!)

خط ۷: تابعی که در خاصیت onchange لیست کشویی اول نوشتیم را اینجا تعریف می‌کنیم. در ادامه خواهیم گفت که درون این تابع چه خبر است!

خط ۸: لیست کشویی اول را انتخاب می‌کنیم و فعلاً داخل متغیر carList قرار می‌دهیم.

خط ۹: لیست کشویی دوم را انتخاب می‌کنیم و فعلاً داخل متغیر modelList قرار می‌دهیم.

خط ۱۰: مقدار گزینه‌ای که در حال حاضر در لیست کشویی اول (کمپانی‌ها) انتخاب شده را دریافت کرده و در متغیر selCar قرار می‌دهیم.

خط ۱۱ تا ۱۳: اگر از قبل گزینه‌ای داخل لیست کشویی دوم (مدل خودروها) قرار داشت، همه را حذف می‌کنیم.

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

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

خط ۱۶ تا ۲۰: با استفاده از یک حلقه for تمام مقادیری که از قبل در آرایه carsAndModels تعریف کرده بودیم را به‌صورت یک گزینه (option) در لیست کشویی دوم درج می‌کنیم و کاربر می‌تواند آنها را انتخاب کند.

اشتراک گذاری:
برچسب ها: HTMLآموزشآموزش ایجاد لیست کشویی وابسته به هم در HTMLآموزش وب سایتتگ لیست کشویی در htmlدوره رایگانساخت لیست کشویی در htmlکشوییلیست کشویی htmlلیست کشویی html cssلیست کشویی html5لیست کشویی در htmlمنوی کشویی html
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...

کسب درآمد از آموزش آنلاین چگونه است؟

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

بهترین ابزارهای رایگان برای حذف پس زمینه تصاویر

برای حذف پس زمینه تصاویر ابزارهای متعددی در اینترنت وجود دارد. هر کدام از آن‌ها...
همیارمن

افزایش امنیت پیج اینستاگرام 😎😎

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

آموزش افزودن تصویر به دسته بندی در وردپرس

افزودن تصویر به دسته بندی یکی از راه‌حل‌هایی است که می‌توانید از طریق آن تصاویر...
دلایل داغ شدن بیش از حد گوشی موبایل و راه های خنک کردن آن

راه های خنک کردن گوشی موبایل های داغ شده

تا چند سال پیش، نهایت کاری که گوشی‌های موبایل برای ما انجام می‌دادند، ارسال پیامک...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت