After spending many hours using google I managed to make 3-level hierarchical taxonomy dropdown with ajax. Here is my code:
searchform.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
$('#apskritis').change(function(){
var $apskritisSlug=$('#apskritis').val();
// call ajax
$("#savivaldybe").empty();
$("#miestas_kaimas").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=get_savivaldybes&apskritis_slug=' + $apskritisSlug,
success:function(results) {
//alert(results);
$("#savivaldybe").removeAttr("disabled");
$("#savivaldybe").append(results);
}
});
}
);
$('#savivaldybe').change(function(){
var $savivaldybeSlug=$('#savivaldybe').val();
// call ajax
$("#miestas_kaimas").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=get_miestai&savivaldybes_slug=' + $savivaldybeSlug,
success:function(results) {
//alert(results);
$("#miestas_kaimas").removeAttr("disabled");
$("#miestas_kaimas").append(results);
}
});
}
);
});
</script>
<?php
function get_terms_dropdown_county($taxonomies, $args){
$taxonomies = array('county'); // CHANGE ME
$args = array(
'order'=>'ASC',
'hide_empty'=>false,
'parent'=> 0
);
$myterms = get_terms($taxonomies, $args);
$optionname = "county";
echo "<div class="input_wrap div_".$optionname."">";
echo "<select id='apskritis' class="select_".$optionname."" name="".$optionname."">'";
echo "<option value="0">Nepasirinkta</option>";
foreach($myterms as $term){
if ( $term->parent == 0) {
echo "<option value="{$term->slug}">{$term->name}</option>";
}
}
echo "</select>";
echo "</div>";
echo "<div class="input_wrap div_".$optionname."">";
echo '<select id="savivaldybe" name="county" disabled="disabled"></select>';
echo '<select id="miestas_kaimas" name="county" disabled="disabled"></select>';
}
echo get_terms_dropdown_county($taxonomies, $args);
?>
functions.php code:
function savivaldybes_implement_ajax() {
if(isset($_POST['apskritis_slug'])) {
$parent_slug = $_POST['apskritis_slug'];
$get_parent_id = get_term_by('slug', $parent_slug, 'county');
$parent_id = $get_parent_id->term_id;
$savivaldybes = get_terms( 'county', 'hide_empty=0&parent=".$parent_id);
foreach ($savivaldybes as $sav) {
$option .= "<option value="'.$sav->slug.'">';
$option .= $sav->name;
$option .= '</option>';
}
echo '<option value="0" selected="selected">Nenurodyta</option>'.$option;
die();
} // end if
}
add_action('wp_ajax_get_savivaldybes', 'savivaldybes_implement_ajax');
add_action('wp_ajax_nopriv_get_savivaldybes', 'savivaldybes_implement_ajax');//for users that are not logged in.
function miestas_kaimas_implement_ajax() {
if(isset($_POST['savivaldybes_slug'])) {
$sav_parent_slug = $_POST['savivaldybes_slug'];
$sav_get_parent_id = get_term_by('slug', $sav_parent_slug, 'county');
$sav_parent_id = $sav_get_parent_id->term_id;
$miestas_kaimas = get_terms( 'county', 'hide_empty=0&parent=".$sav_parent_id);
foreach ($miestas_kaimas as $kaimas) {
$option .= "<option value="'.$kaimas->slug.'">';
$option .= $kaimas->name;
$option .= '</option>';
}
echo '<option value="0" selected="selected">Nenurodyta</option>'.$option;
die();
} // end if
}
add_action('wp_ajax_get_miestai', 'miestas_kaimas_implement_ajax');
add_action('wp_ajax_nopriv_get_miestai', 'miestas_kaimas_implement_ajax');//for users that are not logged in.
I don’t know is this code right but it is working form me 🙂