فرم انتخاب زنجیره ای

فرم انتخاب زنجیره ای

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

برای مشاهده لینک وارد شود

حال کار را شروع می کنیم.

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

Chained AJAX Selects with jQuery and PHP

 

وقتی سوالات زیادی را اضافه می کنید،li های اضافی توسط jQuery اضافه میشوند.همه اینها داخل questions# قرار دارند.

در زیر کد اصلی برای سوالات را مشاهده می کنید

index.html

<ul id="questions">
    <!-- Generated by jQuery -->
    <li>
        <p>What would you like to purchase?</p>
        <select data-placeholder="Choose a product category">
            <option data-connection="phoneSelect" value="Phones">Phones</option>
            <option data-connection="notebookSelect" value="Notebooks">Notebooks</option>
            <option data-connection="tabletSelect" value="Tablets">Tablets</option>
        </select>
    </li>
    <!-- The next sections are inserted here depending on the choices above -->
</ul>

کد jQuery

در داخل کد ما از دو تابع جاوااسکریپت استفاده کردیم

refreshSelect باعث میشود تا در صورت اضافه شدن آیتمی به صفحه عمل تازه سازی و بروز رسانی سوالات را انجام دهد.

fetchSelect  باعث درخواست فید JASON از سرور

مثل کد زیر

assets/js/script.js

$(function(){

    var questions = $('#questions');

    function refreshSelects(){
        var selects = questions.find('select');

        // Improve the selects with the Chose plugin
        selects.chosen();

        // Listen for changes
        selects.unbind('change').bind('change',function(){

            // The selected option
            var selected = $(this).find('option').eq(this.selectedIndex);
            // Look up the data-connection attribute
            var connection = selected.data('connection');

            // Removing the li containers that follow (if any)
            selected.closest('#questions li').nextAll().remove();

            if(connection){
                fetchSelect(connection);
            }

        });
    }

    var working = false;

    function fetchSelect(val){

        if(working){
            return false;
        }
        working = true;

        $.getJSON('ajax.php',{key:val},function(r){

            var connection, options = '';

            $.each(r.items,function(k,v){
                connection = '';
                if(v){
                    connection = 'data-connection="'+v+'"';
                }

                options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
            });

            if(r.defaultText){

                // The chose plugin requires that we add an empty option
                // element if we want to display a "Please choose" text

                options = '<option></option>'+options;
            }

            // Building the markup for the select section

            $('<li>\
                <p>'+r.title+'</p>\
                <select data-placeholder="'+r.defaultText+'">\
                    '+ options +'\
                </select>\
                <span class="divider"></span>\
            </li>').appendTo(questions);

            refreshSelects();

            working = false;
        });

    }

    $('#preloader').ajaxStart(function(){
        $(this).show();
    }).ajaxStop(function(){
        $(this).hide();
    });

    // Initially load the product select
    fetchSelect('productSelect');
});

توجه داشته باشید که تابع fetchSelect یک ارگومان رشته را دریافت می کند.این کلید ما برای عبور از کد PHP خواهد بود،برای ست کردن ایتم هایی که میخواهیم.

در زیر نمونه از پاسخ کد PHP خواهد بود

{
    "items": {
        "Phones": "phoneSelect",
        "Notebooks": "notebookSelect",
        "Tablets": ""
    },
    "title": "What would you like to purchase?",
    "defaultText": "Choose a product category"
}

fetchSelect از طریق حلقه ،در بین ایتم ها حرکت کرده و انهایی که با کلید مورد نظر تطبیق دارند را انتخاب می کند و نمایش می دهد.

chosen-selectbox

کد PHP

ما باید از طریق کد ها نحوه ذخیره اطلاعات در select box را انتخاب کنیم.

ما باید کلاسی برای نگه داشتن اطلاعات select box بنویسیم مثل زیر

ajax.php / 1

// Each select box will be an instance of this class

class SelectBox{
    public $items = array();
    public $defaultText = '';
    public $title = '';

    public function __construct($title, $default){
        $this->defaultText = $default;
        $this->title = $title;
    }

    public function addItem($name, $connection = NULL){
        $this->items[$name] = $connection;
        return $this;
    }

    public function toJSON(){
        return json_encode($this);
    }
}

اکنون ما نیاز به ایجاد کلاسی برای نمایش زیر منو های مرتبط با موضوع انتخابی اول هستیم که توسط کد زیر ان را انجام می دهیم

ajax.php / 2

/* Configuring the selectboxes */

// Product selectbox

$productSelect = new SelectBox('What would you like to purchase?','Choose a product category');
$productSelect->addItem('Phones','phoneSelect')
              ->addItem('Notebooks','notebookSelect')
              ->addItem('Tablets','tabletSelect');

// Phone types

$phoneSelect = new SelectBox('What kind of phone are you interested in?', 'Pick a phone type');
$phoneSelect->addItem('Smartphones','smartphoneSelect')
            ->addItem('Feature phones','featurephoneSelect');

// Smartphones

$smartphoneSelect = new SelectBox('Which is your desired smartphone?','Choose a smartphone model');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
                 ->addItem('iPhone 4S','iphoneSelect')
                 ->addItem('Samsung Galaxy S2')
                 ->addItem('HTC Sensation');

// Feature phones

$featurephoneSelect = new SelectBox('Which is your desired featurephone?','Choose a feature phone');
$featurephoneSelect->addItem('Nokia N34')
                   ->addItem('Sony Ericsson 334')
                   ->addItem('Motorola');

// iPhone colors

$iphoneSelect = new SelectBox('What color would you like?','Choose a color');
$iphoneSelect->addItem('White')->addItem('Black');

// Notebook select

$notebookSelect = new SelectBox('Which notebook would you like to buy?', 'Choose a notebook model');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
               ->addItem('Macbook Air','caseSelect')
               ->addItem('Acer Aspire','caseSelect')
               ->addItem('Lenovo Thinkpad','caseSelect')
               ->addItem('Dell Inspiron','caseSelect');

// Tablet select

$tabletSelect = new SelectBox('Which tablet would you like to buy?', 'Pick a tablet');
$tabletSelect->addItem('Asus Transformer','caseSelect')
             ->addItem('Samsung Galaxy Tab','caseSelect')
             ->addItem('iPad 16GB','caseSelect')
             ->addItem('iPad 32GB','caseSelect')
             ->addItem('Acer Iconia Tab','caseSelect');

// Case select

$caseSelect = new SelectBox('Buy protective casing?','');
$caseSelect->addItem('Yes')->addItem('No');

// Register all the select items in an array

$selects = array(
    'productSelect'			=> $productSelect,
    'phoneSelect'			=> $phoneSelect,
    'smartphoneSelect'		=> $smartphoneSelect,
    'featurephoneSelect'	=> $featurephoneSelect,
    'iphoneSelect'			=> $iphoneSelect,
    'notebookSelect'		=> $notebookSelect,
    'tabletSelect'			=> $tabletSelect,
    'caseSelect'			=> $caseSelect
);

کد بالا تعدادی ایتم ها را انتخاب کرده و در داخل ارایه selects قرار می دهد.وقتی این اسکریپت درخواستی از ajax دریافت می کند به آرایه نگاه کرده و در صورت وجود نتایج را بر می گرداند.

ajax.php / 3

// We look up this array and return a select object depending
// on the $_GET['key'] parameter passed by jQuery

// You can modify it to select results from a database instead

if(array_key_exists($_GET['key'],$selects)){
    header('Content-type: application/json');
    echo $selects[$_GET['key']]->toJSON();
}
else{
    header("HTTP/1.0 404 Not Found");
    header('Status: 404 Not Found');
}

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


6 − = چهار

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>