آموزش ایجاد فیلد انتخاب استان و شهر به صورت Ajax + لیست شهرها

۱۸ دیدگاه

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

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

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

 

کد 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 برگشت داده خواهند شد.

در همین رابطه :   15 افکت زیبا و دیدنی CSS برای متن Text

 

کد 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 استان ها و شهرهای ایران

دسته بندی : AjaxJavaScript

18 نظر

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

  2. سلام
    ممنون از راهنمایی شما
    این سورس کد را در کدام قسمت سایت وردپرس میتوان پیاده کرد تا در فرمهای آن اعمال شود؟

  3. سلام من کد زیر در فایل getCities نوشتم
    ولی ارتباط برقرار نمیکنه !!! مشکلش چی ؟؟

    <?php
    /**********************Connection************************************/
    $_username = "root";
    $_Password = "";
    $_SERVER = "localhost";
    $_DataBase = "maskanma";
    $link = mysqli_connect($_SERVER, $_username, $_Password, $_DataBase);
    /*******************************************************************/
    error_reporting(E_ALL ^ E_NOTICE);//error_reporting Closed
    /**********************Connection************************************/
    if(isset($_GET['province_id'])) {
    $province_id = mysqli_real_escape_string($link, $_GET['province_id']);
    $Query = "SELECT * FROM maskanma.cities WHERE province_id = '$province_id'";
    $Result = mysqli_query($link, $Query);
    $Num = mysqli_num_rows($Result);
    while ($Row = mysqli_fetch_assoc($Result)) {
    $data[] = $Row;
    }
    json_encode($data);
    }else
    echo "No";
    اینم قسمت HTML

    صفحه اصلی

    صفحه اصلی
    جستجوی ملک
    بلاگ
    مشارکت
    درباره ما

    ثبت ملک
    ورود / عضویت

    استان را انتخاب کنید
    آذربایجان شرقی
    آذربایجان غربی
    اردبیل
    اصفهان
    البرز
    ایلام
    بوشهر
    تهران
    چهارمحال بختیاری
    خراسان جنوبی
    خراسان رضوی
    خراسان شمالی
    خوزستان
    زنجان
    سمنان
    سیستان و بلوچستان
    فارس
    قزوین
    قم
    کردستان
    کرمان
    کرمانشاه
    کهکیلویه و بویراحمد
    گلستان
    گیلان
    لرستان
    مازندران
    مرکزی
    هرمزگان
    همدان
    یزد

    آپارتمان
    ویلایی
    زمین
    تجاری
    کلنگی

    function getCities(th)
    {

    var selected_city = $(‘#city’).attr(‘data-selected’) || null;

    $(‘#city’).html(”).fadeIn(800).append(‘لطفا کمی صبر کنید …’);

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

    $(‘#city’).html(”).fadeIn(800).append(‘انتخاب شهر’);
    $.each(cities, function(i, city){
    if(selected_city == city.id) $(‘#city’).append(” + city.name + ”);
    else $(‘#city’).append(” + city.name + ”);
    });
    },
    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);
    });

  4. سلام.
    خیلی ممنون مطلب خیلی کاربردی بود جای دیگه پیداش نکردم. وظیفه دونستم به خاطر زحماتی که رایگان در اختیارمون گذاشتید تشکر کنم. پیروز باشید

    1. سلام . وقت شما هم بخیر . یک کد php باید بنویسید که id استان رو بگیره و از دیتابیس لیست شهرهای مربوط به اون id رو بگیره و این لیست شهرها رو به صورت json برگشت بده .

    1. سلام . وقت شما هم بخیر . یک کد php باید بنویسید که id استان رو بگیره و از دیتابیس لیست شهرهای مربوط به اون id رو بگیره و این لیست شهرها رو به صورت json برگشت بده .

  5. با سلام و با عرض تشکر بابت این مقاله خوبتون فقط لطف میکنین بفرمائید داخل فایل getCities.php چی باید باشه آخه همه کدهای شما رو انتقال دادم اما فقط در قسمت شهر ها مینویسه “لطفا کمی صبر کنید…” و هیچ اتفاق دیگه ای نمیفته متاسفانه..

    ممنون میشم اگر راهنمایی کنید

    با تشکر

      1. با سلام و خسته نباشید
        ممنون بابت پاسخگویی تون و تشکر بابت آموزش خوبتون.. خوشبختانه مشکل حل شد.. من از کدهای شما در لاراول استفاده کردم و متاسفانه route مشکل داشت که درستش شد..
        خیلی کارتون عالی بود

        با تشکر

  6. سلام، امیدوارم حالتون خوب باشه. داخل فایل getCities.php چه کدی قرار میگیره؟ بعد چه جوری معلوم میشه کدوم شهرها مربوط به کدوم استان میشه؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in Ajax, JavaScript
ایجاد آسان فرم ثبت نام با PHP/MySQL به صورت Ajax

در این آموزش خواهیم دید که چگونه می توانیم یک فرم ثبت نام به وسیله PHP/MySQL به صورت Ajax (ایجکس)...

Close