Membuat Dynamic loading of dropdowns dengan Ajax dan PHP

Pada turorial kali ini akan menerangkan penggunaan dropdown dengan menggunakan ajax dan php, dropdown disini merupakan dropdown yang tampilan menu yang akan kita pilih ke bawah kemudian dia akan me load ke samping, disini merupakan variasi berbeda pada penerapan menu dropdown dengan bantuan ajax tentunya

berikut langkah-langkahnya

buat script coding Jquery

$(document).ready(function() {
 
	//$('#loader').hide();
 
	$('.parent').livequery('change', function() {
 
		$(this).nextAll('.parent').remove();
		$(this).nextAll('label').remove();
 
		$('#show_sub_categories').append('<img id="loader" 
style="float:left; margin-top: 7px;" src="loader.gif" alt="" />'
);   $.post("get_chid_categories.php", { parent_id: $(this).val(), }, function(response){   setTimeout("finishAjax('show_sub_categories',
  '"
+escape(response)+"')", 400); });   return false; }); });   function finishAjax(id, response){ $('#loader').remove();   $('#'+id).append(unescape(response)); }

HTML
<div id="show_sub_categories">
<select class="parent" name="search_category">
<option selected="selected">-- Categories --</option>
 
<option value="&lt;?php echo $rows['id'];?&gt;"></option>
 
	</select></div>

GET_CHILD_CATEGORIES.PHP

0) {?&gt; <select class="parent" name="sub_category"> <option selected="selected">-- Sub Category --</option>   <option value="&lt;?php echo $rows['id'];?&gt;"></option>   </select>   No Record Found !';} } ?&gt;

Berikut hasil akhir dari tutorrial kali ini. Untuk dapat mengdownload sourcode program lengkap dapat mengklik link disini

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.


Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id