Dependant secondary category select dropdown.

Mobster

64 posts

I ended up building my own “custom rolled” solution.

I’m using a little ajax, jquery, child categories plugin and templates to complete what I was looking for.

Here’s the (currently unfinished) project with the dependent category menu in action. http://wadsworthmusic.com/instruments/

Here’s a few code bits that are a little unrefined but working.

In the category template you want the menu on.

<!---  ///// Hackidoodle Ajax Cat Menu //// --->

    <form name="catmenu" action="">

    <select name="category" id="category">
        {exp:channel:categories channel="instruments" style="linear" parent_only="yes" show="not 79|71"}
            <option value="{category_name}">{category_name}</option>
        {/exp:channel:categories}

    </select>
  </form>

<div class="loading-center">/themes/site_themes/wadsworth_music/img/wait.gif</div>


[removed][removed]
[removed]
$(document).ready(function () {

// Ajax Loader

$('.loading-center')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

// Pass variable on Submit
  

function DoSubmit(){
    document.myform.myinput.value = "location=document.catmenu.category.options[document.catmenu.category.selectedIndex].value;";
    return true;
    }


$("#selcat").val($("#selcat option:first").val());



   var $category = $('#category'),
    $selcat = null;

    $category.change(function () {
   var categoryName = $category.val();
    
   if ($selcat == null) {
    $selcat = $('<select id="selcat" name="selcat" class="awesome_selectbox" /select>').appendTo('form');

    $('form').append('');
    }
  
    $selcat.load('/dyno-menu/select-boxes-' + categoryName + '.html'); //This defines the url of the ajax templates
    });
  
});


[removed]

I created a template group named dyno-menu

The template names are

select-boxes-instrumentservices.html
select-boxes-percussion.html
select-boxes-pianos.html
select-boxes-printmusic.html
select-boxes-services.html
select-boxes-sound.html
select-boxes-stringed.html
select-boxes-winds.html

Each one of these pages has a child category tag pair defining the category you want to display.

{exp:child_categories category_group="2" parent="your_categoy_id" parent_categories_sort_by="custom" child_categories_sort_by="custom" show_empty="yes"}
     {child_category_start}
<option value="{path='instruments/category-list/category/C{child_category_id}'}">{child_category_name} ({entries_total}) </option>
     {child_category_end}
  {/exp:child_categories}

So, below looks in the dyno-menu template group for select-boxes- and looks for the name of the file after the - and which is also the name of the category being used.

$selcat.load('/dyno-menu/select-boxes-' + categoryName + '.html');

Thread

Mobster

Mobster

Username

Password

Thread