یکی از کارهایی که معمولا در پروژه ها انجام میشه ایجاد فرم ها هست . برای ثبت نام کاربر، ثبت کالا و … . در این فرم ها یکی از فیلدهایی که خیلی مورد استفاده قرار می گیره معمولا فیلدهای انتخاب استان و سپس شهر ، هستند .

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

در این مقاله کدی که خودم در پروژه ها استفاده می کنم براتون قرار میدم امیدوارم مورد استفاده تون قرار بگیره . اگر اشکال یا موردی بود لطفا در بخش نظرات بگید.

کد HTML فیلد انتخاب استان

<select name="province_id" id="province" data-action="http://localhost/fotolia/getCities.php">
<option value="0">استان را انتخاب کنید</option> 
<option value="1">آذربايجان شرقي</option> 
<option value="2">آذربايجان غربي</option> 
<option value="3">اردبيل</option> 
<option value="4">اصفهان</option> 
<option value="5">البرز</option> 
<option value="6">ايلام</option> 
<option value="7">بوشهر</option> 
<option value="8">تهران</option> 
<option value="9">چهارمحال بختياري</option> 
<option value="10">خراسان جنوبي</option> 
<option value="11">خراسان رضوي</option> 
<option value="12">خراسان شمالي</option> 
<option value="13">خوزستان</option> 
<option value="14">زنجان</option> 
<option value="15">سمنان</option> 
<option value="16">سيستان و بلوچستان</option> 
<option value="17">فارس</option> 
<option value="18">قزوين</option> 
<option value="19">قم</option> 
<option value="20">كردستان</option> 
<option value="21">كرمان</option> 
<option value="22">كرمانشاه</option> 
<option value="23">كهكيلويه و بويراحمد</option> 
<option value="24">گلستان</option> 
<option value="25">گيلان</option> 
<option value="26">لرستان</option> 
<option value="27">مازندران</option> 
<option value="28">مركزي</option> 
<option value="29">هرمزگان</option> 
<option value="30">همدان</option> 
<option value="31">يزد</option>
</select>

این کد همانطور که می بینید یک خصیصه خاص بنام data-action داره . هدف از گذاشتن این خصیصه این هست که وقتی استان توسط کاربر انتخاب شد ،id یا شماره منحصر به فرد استان انتخاب شده، بوسیله ایجکس به آدرس داخل این خصیصه (که اینجا http://localhost/fotolia/getCities.php هست) ارسال خواهد شد و شهرهای استان توسط این آدرس به صورت Json برگشت داده خواهند شد.

کد HTML فیلد انتخاب شهر

<select id="city" name="city_id"></select>

این کد نیز ساده است و یک خصیصه id مهم دارد بنام city که بعد از گرفتن لیست شهرها که در بالا گفته شد ، بوسیله این id ، شهرها رو با JavaScript به فیلد اضافه می کنیم.

کد JavaScript مورد نیاز

function getCities(th)
{

    selected_city = $('#city').attr('data-selected') || null;


    $('#city').html('').fadeIn(800).append('<option value="0">لطفا کمی صبر کنید ...</option>');

    $.ajax({
        type: "GET",
        url: $(th).data('action') + $(th).val(),
        dataType : 'json',
        success: function(data)
        {
            var cities = $.parseJSON(data);

            $('#city').html('').fadeIn(800).append('<option value="0">انتخاب شهر</option>');
            $.each(cities, function(i, city){
                if(selected_city == city.id) $('#city').append('<option value="' + city.id + '" selected>' + city.name + '</option>');
                else $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
            });
        },
        error : function(data)
        {
            console.log('province_city.js#getCities function error: #line : 30');
        }
    });


    return false; // avoid to execute the actual submit of the form.
}

/**
 * Load cities on state change
 */
$(document).on('change', '#province', function (e) {
    getCities(this);
});

در این کد دو بخش وجود دارد . اول یک تابع بنام getCities که وقتی استان انتخاب شد فراخوانی می شود و لیست شهرهای مربوط به استان را بوسیله ایجکس دریافت می کند و در فیلد انتخاب شهر ، کپی می کند.در بخش انتهایی کد هم بخش مربوط به تشخیص رویداد انتخاب استان رو می بینید که در این هنگام ، تابع getCities را فراخوانی می کند.

دانلود فایل SQL استان ها و شهرهای ایران