در این مقاله قصد داریم یکی از مطالب بسیار مهم و کاربردی یعنی ایجاد لیست کشویی وابسته به هم در HTML که مربوط به مباحث برنامه نویسی سمت کاربرمیشود را آموزش دهیم که بنده در سایتهای فارسی، آموزش کاملی در این مورد پیدا نکردم.برای مثال میتوان به انتخاب استان و شهر اشاره کرد. اگر دقت کرده باشید در این مدل انتخابها چندین لیست کشویی (drop-down) که ما در زبان html با تگ select آنها را پیاده سازی میکنیم، وجود دارد که گزینه (option) آنها به انتخاب قبلی شما بستگی دارد.
قدم اول: ابتدا لیست های کشویی را مطابق کد زیر ایجاد میکنیم، دقت داشته باشید که فقط در 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 دوم به انتخاب کاربر در 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>
این آموزش هم به پایان رسید، امیدوارم کسانی که نیاز به این آموزش داشتند نهایت استفاده را برده باشند.
چنانچه قسمتی از مطلب گنگ است یا سوالی در این زمینه دارید به وب سایت ادمین سایت مراجعه نمایید .
منبع: ادمین سایت