تحديث ينود قائمة بدون تحديث الصفحة

كما فهمت أنت بحاجة لخانة تعبئة بجنانب القائمة مع زرّ إضافة, وعندما يعبّي الزائر الخانة ويضغط الزر, القائمة تتجدّد.

لعمل ذلك, أنت بحاجة لجافا سكريبت ويمكنك الإستعانة بال jquery وال ajax.

الآجاكس يرتبط بملف php يقوم بإضافة المدينة الجديدة لقاعدة البيانات ومن ثمّ يسترجع القائمة كلّها مرّة أخرى ويبدلها بالموجودة بالصفحة.

أو يمكنك أن تبعث المدينة إلى قاعدة البيانات وأن تضيف إسم المدينة للقائمة عن طريق معادلة append (أو ربّما غيرها.. إفحص!!).

الحل الأول أسهل. والثاني أنجع.

استخدم ال Chosen JQuery Plugin ديه عشان تخلى المستخدم يختار اكتر من اوبشن بشكل كويس, اما بالنسبة للتحديث بعد كل إختيار فإفترض انك عندك كود الselect كالأتى

<select name="cities" id="citites" multiple class="slct chzn-select">
	<option value="portsaid">Portsaid</option>
	<option value="ismalia">Ismalia</option>
	<option value="alexandria">Alexandria</option>
</select>

دلوقتى فى الصفحة اللى فيها كود الجافاسكريبت أضف الكود ده ( بإعتبار انك مستخدم ال chosen plugin )

$(".chzn-select").chosen();
$(document).ready(function() {  
    $('#cities').change(function(){
    	$.ajax({
			url:'update_cities.php',
			type:'POST',
			data:'city=' + $("#cities").val()
		});
    });
});

وفى صفحة update_cities.php

if( !empty($_POST) )
{

	// This would be an array of the selected cities
	$cities = explode(",", $_POST['city']);

	// Now connect to database and update the users table with
	// this array

}