An example is here on jsfiddle (php file is in css textarea). When you change the select#main_cat ajax looks up the sub catagories and inputs them in the select#sub_cat.
The only problem is the result is always 0. I am not sure what is the problem.
ANY HELP IS APPRICIATED!
functions.php
function implement_ajax() {
if(isset($_POST['main_catid'])) {
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= '<option value="'.$cat->term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= '</option>';
}
echo '<option value="-1" selected="selected">Scegli...</option>success'.$option;
die();
} // end if
}
add_action(âwp_ajax_my_special_actionâ, âimplement_ajaxâ);
add_action(âwp_ajax_nopriv_my_special_actionâ, âimplement_ajaxâ);
index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script>
$(function(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// call ajax
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=my_special_action&main_catid=61',// + $mainCat,
success:function(results)
{
// alert(results);
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
$("#asdf").text(results);
}
});
}
);
});
</script>
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
<select name="sub_cat" id="sub_cat" disabled="disabled"></select>
Try this: