ایجاد دو دراپ داون ( لیست کشویی ) وابسته به هم در RSFORM

در سایت خود میخواهد با فرم ساز rsform فرمی ایجاد کنید که دو درآپ داون( لیست کشویی ) به هم وابسته باشند مثلا در درآپ داون اولی استان تهران انتخاب شود و در درآپ دومی نام شهرستان های خود تهران نمایش داده شود، پس به این آموزش توجه کنید.

چند روز پیش یکی از دوستانم این مشکل برایش پیش آمد با خودم گفتم این آموزش را برای همه بگذارم تا شاید کسانی دیگر هم چنین مشکلی داشته باشند.

در سربرگ خواص از قسمت CSS and Javascript به کادر مربوط به جاوا اسکریپت ( Javascript ) میرویم کدهای زیر را وارد میکنیم:

<script type=”text/j-avascript”>

function dynamic1(parent,child){

var parent_array = new Array();

parent_array[”] = [‘Please select a State’];

parent_array[‘Tehran’] = [‘Varamin’,’Robat Karim’,’Shahriar’,’Rey’];

parent_array[‘Yazd’] = [‘Yazd’,’Ardakan’,’Taft’];

parent_array[‘Kerman’] = [‘Jiroft’,’Kerman’,’Fahraj’];

parent_array[‘Gilan’] = [‘Soomesara’,’Rasht’,’Rossdar’,’Masal’];

parent_array[‘Qazvin’] = [‘Qazvin’,’Alborz’,’Abic’,’Boyinzahra’];

var thechild = document.getElementById(child);

thechild.options.length = 0;

var parent_value = parent.options[parent.selectedIndex].value;

if (!parent_array[parent_value]) parent_value = ”;

thechild.options.length = parent_array[parent_value].length;

for(var i=0;i<parent_array[parent_value].length;i++){

thechild.options[i].text = parent_array[parent_value][i];

thechild.options[i].value = parent_array[parent_value][i];} }

</script>

حال کدها را توضیح میدهم:

برای درج کلمه مورد نظر شما برای انتخاب کابر هست مثلا “لطفا یک استان انتخاب کنید”

parent_array[”] = [‘Please select a State’];

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

parent_array[‘Tehran’] = [‘Varamin’,’Robat Karim’,’Shahriar’,’Rey’];

مثلا شما میخواین با انتخاب نام استان “Tehran” در دراپ داون اول، گزینه های Varamin و Robat Karim و Shahriar در دراپ داون دوم به کاربر نمایش داده بشه که در این صورت باید این قطعه کد را مطابق با خواسته خود ویرایش کنید.

بعد درآپ داون اول رو با آیتم های مورد نیازتون به صورت زیر و با مثال کد بالا و نام دلخواهتون بسازید.
|Please select a State
Tehran
Yazd
Kerman
Gilan
Qazvin

توی همین لیست کشویی در قسمت خواص اضافه، کد زیر را وارد کنید.

on-change=”dynamic1(this,’NameState’);”

حالا درآپ داون دوم رو با نامی که در کد قبلی گفتم ایجاد کنید و فقط در قسمت آیتم ها گزینه زیر رو وارد کنید.

|Please select a State

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