Home

About Proweb

Services

Paket website

Portfolio

Articles

Career

Contact Us

Search

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.