ساخت لیست های کشویی وابسته به هم

[طراحی سایت ارزان و حرفه ای 0]

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

 

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

 

چنانچه قسمتی از مطلب گنگ است یا سوالی در این زمینه دارید به وب سایت لینک ها تنها برای اعضای سایت قابل نمایش است. مراجعه نمایید .

 

لینک ها تنها برای اعضای سایت قابل نمایش است.