برگزیده های پرشین تولز

ایجاد لیست کشویی (drop-down) وابسته به هم در HTML

yeganee

کاربر تازه وارد
تاریخ عضویت
9 سپتامبر 2018
نوشته‌ها
5
لایک‌ها
0
سن
33
گاهی اوقات نیاز داریم تا چندین لیست کشویی (drop-down) را به هم وابسته کنیم. برای مثال انتخاب استان و شهر که در بسیاری از سایت ها استفاده می‌شود. در این مقاله قصد داریم تا این مسئله را بطور کامل آموزش دهیم.در این مقاله قصد داریم یکی از مطالب بسیار مهم و کاربردی یعنی ایجاد لیست کشویی وابسته به هم در HTML که مربوط به مباحث برنامه نویسی سمت کاربر می‌شود را آموزش دهیم که بنده در سایت‌های فارسی، آموزش کاملی در این مورد پیدا نکردم.


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

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

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

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

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

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

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

<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);
modelList.options.add(car);
}
}
}
</script>


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


 
بالا