چطور میتوانم یک لیست کشویی وابسته به هم در html ایجاد کنم؟

با سلام خدمت دوستان درسمنی. در خدمتتان هستیم با یکی دیگر از مقاله های html به نام ایجاد لیست کشویی وابسته به هم در html.

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

در همین مثال استان و شهرها که گفتیم؛ ابتدا باید استان مورد نظر را از لیست‌کشویی اول انتخاب کنیم تا شهرها در لیست کشویی دوم فعال شوند و به این ترتیب می‌توانیم شهر مورد نظر هم انتخاب کنیم. به زبان ساده‌تر یعنی گزینه‌های لیست‌کشویی دوم که شهرها هستند به لیست‌کشویی اول که انتخاب استان است بستگی دارد.

این انتخاب‌ها چگونه کار می‌کنند و پیاده‌سازی می‌شوند؟

اگر ذهن شما هم درگیر این سوال شده است، پس با ما همراه شوید.

برای ایجاد لیست‌های کشویی از زبان html استفاده میکنیم، سپس با زبان شیرین جاوا اسکریپت تعیین میکنیم که انتخاب اول کاربر چیست تا گزینه‌های مربوط در لیست کشویی بعدی را به نمایش بگذاریم. برای درک بهتر، این موضوع را با یک مثال ادامه میدهیم.

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

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

<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 اول گزینه‌ها وجود دارند و قرار است که در select دوم بسته به انتخاب شما در select اول گزینه‌ها بارگذاری شوند. در قدم بعدی باید کدهای جاوا اسکریپت خود را اضافه کنیم، کدی که باعث وابستگی گزینه‌های select دوم به انتخاب کاربر در select اول می‌شود:

<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 دوم بارگذاری شوند را قرار می‌دهیم یعنی مدل‌های خودرو.

در ادامه یک رویداد تعریف میکنیم آن هم به کمک تابع function برای تعریف خاصیت onchange لیست کشویی اول. در ادامه می‌خواهیم از درون این تابع خبردار شویم که چه مفهومی دارد و قرار است برای ما چه کاری انجام دهد.

در خط اول این تابع، لیست کشویی اول را انتخاب و فعلاً داخل متغیر carList قرار می‌دهیم و در خط بعدی نیز لیست کشویی دوم را انتخاب  و فعلاً داخل متغیر modelList قرار می‌دهیم. حالا باید مقدار گزینه‌ای که در حال حاضر در لیست کشویی اول (کمپانی‌ها) انتخاب شده را دریافت و در متغیر selCar قرار دهیم. در خط 5 تا 6 میگوییم اگر از قبل گزینه‌ای داخل لیست کشویی دوم قرار داشت، همگی حذف شوند. در خط هفتم مقادیر تعریف شده در خانه‌ی مربوط به گزینه انتخاب شده در لیست کشویی اول را از آرایه carsAndModels می‌گیریم و در متغیر cars قرار می‌دهیم؛ سپس در خط بعدی این تابع، بررسی می‌کنیم که آیا گزینه‌ای برای این انتخاب تعریف شده یا خیر که اگر تعریف شده بود، دستورات بعدی اجرا خواهند شد. در واقع بررسی میکند تا متغیر cars خالی نباشد.
در ادامه هم با استفاده از یک حلقه for تمام مقادیری که از قبل در آرایه carsAndModels تعریف کرده بودیم را به‌صورت یک گزینه (option) در لیست کشویی دوم درج می‌کنیم تا کاربر بتواند آنها را انتخاب کند.

کلام آخر:

خب همراهان همیشگی درسمن امیدواریم توانسته باشیم تا مبحث لیست کشویی وابسته به هم در html را با بیانی روان ارائه داده باشیم. اگر قصد یادگیری بهتر این مبحث را دارید، از دوره‌ی سایت بهره ببرید و برای رسیدن به سوالات خود به انجمن پرسش و پاسخ ما مراجعه کنید. خوشحال می‌شویم تا نظرات و انتقادات خود را با ما در میان بگذارید؛ دوستان موفق باشید.