آموزش

لیست استان و شهرستان های ایران برای فرم های تحت وب

بازدید141.4kپست ها1آخرین فعالیت4 سال پیش
2
1

سلام دوستان
این کد لیست استان‌ها ای ایران رو به کاربر می‌ده و بعد از انتخاب استان، لیست شهر پر می‌شه و کاربر باید شهر رو انتخاب کنه.

کد html انتخاب استان

<select name="province_id" id="province" data-action="http://localhost/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/getCities.php هست) ارسال خواهد شد و شهرهای استان توسط این آدرس به صورت Json برگشت داده خواهند شد.

کد انتخاب شهر

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

کد ajax

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 آماده لیست شهر ها

منبع: fotolia.ir

آخرین ویرایش: 18-12-2017 ???? 13:32، توسط رضا رمضانپور
0

سلام
ممنون از آموزش خوبتون
کد PHP مربوطه رو همراه سایر کد ها نذاشتین؟
ممنونم

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.