Jquery ajax multi level chained select boxes Code duplication

Jquery ajax multi level chained select boxes Code duplication

I'm trying to write Chained select boxes using Jquery Ajax my problem is
that after every call i have to duplicate bunch of code i wonder is there
any way to take apart code and put them into the functions and call that
functions after respond from the server. I found alot of working examples
around but eigther they are not unlimited level or they do not work in IE
the code i write does work on IE7+
This is Jquery part :
$(document).ready(function () {
$('.parent').on('change', function () {
$(this).nextAll('.parent').remove();
$(this).nextAll('label').remove();
var levelId = this.id;
var parent_id = $('.parent option:selected').val();
var data = 'parent_id=' + parent_id + '&levelId=' + levelId;
$.ajax({
type: "POST",
url: "get_chid_categories.php",
data: data,
success: function (response) {
var $response = $(response); // create the elements
$response.filter(".parent");
$response.appendTo("#show_sub_categories");
$response.on('change', function () {
$(this).nextAll('.parent').remove();
$(this).nextAll('label').remove();
var parent_id = $('#' + this.id + ' option:selected').val();
var levelId = this.id;
var data = 'parent_id=' + parent_id + '&levelId=' + levelId;
$.ajax({
type: "POST",
url: "get_chid_categories.php",
data: data,
success: function (response) {
var $response = $(response); // create the elements
$response.filter(".parent");
$response.appendTo("#show_sub_categories");
//alert(response);
}
})
});
}
})
})
as seen from code ihave to repeat piece of code again and again but as
soon as i put it into the function it is not working . If anybody can
advise how to put this piese of code into the function and call it so it
self invokes on change
PHP part of code
<?php
session_start();
include('dbcon.php');
$levelId = 0;
if($_REQUEST)
$levelId=0;
$id = $_REQUEST['parent_id'];
$query = "select * from categories where pid = ".$id;
$results = @mysql_query( $query);
$num_rows = @mysql_num_rows($results);
if($num_rows > 0)//
{
//?>
<select name="sub_category" id = "<?php echo $levelId+1; ?>"
class="parent" size="10">
<option value="" selected="selected">-- Sub Category --</option>
<?php
while ($rows = mysql_fetch_assoc(@$results))
{?>
<option value="<?php echo $rows['id'];?>"><?php echo
$rows['category'];?></option>
<?php
}?>
</select>
<?php
}
else
{
echo '<label style="padding:7px;float:left; font-size:12px;">No Record
Found !</label> <br> <br>';
var_dump($_SESSION['category']);
}
}
?>
this piese of code i want to put into the function:
$(this).nextAll('.parent').remove();
$(this).nextAll('label').remove();
var levelId = this.id;
var parent_id = $('.parent option:selected').val();
var data = 'parent_id=' + parent_id + '&levelId=' + levelId;
$.ajax({
type: "POST",
url: "get_chid_categories.php",
data: data,
success: function (response) {
var $response = $(response); // create the elements
$response.filter(".parent");
$response.appendTo("#show_sub_categories");
Please advise me how to fix it if you can.