سلام

در این مبحث می خواهیم روی یک سری از تگ های select که به صورت آنی تغییر محتوا داده میشوند ، صحبت کنیم.به زبان ساده تر یک سری select داریم که انتخاب یک گزینه (option) در یکی از آنها ، باعث تغییر یافتن محتوای یک select دیگر می شود.

مثلا select اولی نام کشور باشد ، با انتخاب آن ، یک select دیگر نمایان شده که شامل استانهای آن است .سپس با انتخابیکی از استان ها ، یک select دیگر که شامل شهر های آن است ، نمایان می شود و … . می بینید که از این امکان در موارد زیادی می شود استفاده کرد.

خوب این کارها را با jQuery انجام خواهیم داد ولی در سمت سرور هم از زبان php استفاده کرده ایم بنابراین استفاده از پایگاه داده نیز به راحتی ممکن خواهد بود.

کد HTML

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

هنگامی که لازم باشد سوالات بیشتری اضافه شوند ، LI های اضافی توسط جی کوئری ایجاد خواهند شد که همه آنها نیز داخل یک لیست نا مرتب ul یا Unordered List با آی دی questions# قرار دارند.

عنوان و گزینه ها نیز به صورت JSON بدست خواهند آمد که در بخش PHP آموزش خواهیم دید.در اینجا کدهای لازم برای ایجاد یک li کامل را مشاهده می کنید:

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>

احتمالا در صفحه پیش نمایش متوجه شده اید که کنترل های select مورد استفاده ما ، با نوع پیش فرض مرورگرها فرق دارد.علت آن این است که ما از پلاگین chosen جی کوئری برای ایجاد select هایی زیباتر و کاربردی تر استفاده کرده ایم.

برای استفاده از آن نیز فقط تابع ()chosen را در select فراخوانی می کنیم.

کد jQuery

کاری که جی کوئری برای شما انجام می دهد ، این است که ابتدا اطلاعات جعبه های انتخاب (select boxes) را به صورت JSON از سرور می گیرد ،سپس کدهای html آنها را ایجاد می کند و در انتها ،رویدادهایی مربوط به تغییر گزینه هاش را می سازد.

اگر یکی از گزینه های جعبه انتخاب تغییر کند ؛ این پروسه برای جعبه انتخاب جدید نیز تکرار می شود.

در کد به وسیله دو تابع جاوااسکریپت ، این اتفاق رخ می دهد :

• refreshSelects پلاگین chosen را اعمال می کند و نیز هر گاه آیتم جدیدی به صفحه اضافه شود ، رویدادها را رندر می کند
• fetchSelect یک درخواست از نوع JSON به سرور می فرستد و پاسخ برگشتی را به صورت کدهای html در می آورد

می توانید اینها را پایین ببینید

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');

});

خیلی خوب ! حالا تولید فید JSON باقی مانده است . توجه کنید که تابع fetchSelect یک آرگومان رشته ای دریافت می کند.این کلیدی است که ما به php پاس می دهیم و می تواند مجموعه ای از آیتم ها نیز باشد.

اینجا یک نمونه از پیامی را که اسکریپت php می فرستید می بینید :

{

    "items": {

        "Phones": "phoneSelect",

        "Notebooks": "notebookSelect",

        "Tablets": ""

    },

    "title": "What would you like to purchase?",

    "defaultText": "Choose a product category"

}

fetchSelect یک حلقه بین عناصر items ایجاد کرده و از کلید های آن به عنوان متن گزینه ها و از مقادیر هم برای اتصال فی ما بین استفاده می کند.مثلا Phones و Notebooks موجب خواهند شد اسکریپت selectbox های جدیدی ایجاد کند ولی Tablets نه.

کد PHP

حالا باید دنبال مکانی برای ذخیره اطلاعات جعبه های انتخاب باشیم.با استفاده از دیتابیس و انتخاب چند ردیف از آن می توان این کار را انجام داد.اما اینجا ما این اطلاعات را به صورت ایستا در یک شی php ذخیره کردیم.به این منظور یک کلاس ساده php تعریف کرده و اطلاعات را داخل آن ذخیره می کنیم :

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);
	}
}

حالا ما باید یک شی از این کلاس برای هر جعبه انتخاب ایجاد کنیم و تابع ()addItem را برای افزودن گزینه ها به آن فراخوانی کنیم.این متد یک پارامتر اختیاری بنام connection$ نیز دارد که شامل اسم جعبه انتخاب مربوطه است.

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
);

کد بالا تعدادی select ایجاد کرده و در متغیر select$ قرار می دهد.هنگامی که این اسکریپت یک درخواست 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');
}

با فراخوانی تابع ()toJSON که قبلا تعریف کرده ایم , می توانیم خروجی اطلاعات مربوط به select ها را به صورت JSON بر گردانیم تا توسط jQuery قابل استفاده باشد.

تبریک ,حالا کار تغییر محتوای قدم به قدم select هایمان توسط php و jquery تمام شد !

منبع