从属下拉列表

I have three listboxs on a page. The first one can be populated with one of five different options. The second listbox will populate based on a selection of one of the five. The third will populate based on the second. I have the first one working fine, having major problems with the second and the third. Here is the code that calls and populates so far. The first box is named Doggie, the second Kitty and the third Pig. mydoggie.php has a nested switch. case, then type.

 $(document).ready(function() {
    $("input:image").click(function(evt) {
        evt.preventDefault();
        display("Doggie", $(this).val());
        })


    $("Doggie").change(function(){
              display("Kitty", $(Doggie).val());
        })

        $("Kitty").change(function(){
              display("Pig", $(Kitty).val());
        });
  });

function display(what, type) {
    $.getJSON("mydoggie.php?ajax=true", { "case": what, "type" : type}, function(data) {
        $("#"+_type_).empty();
        $.each(data, function(index, objRecord) {
            $("#"+_type_).append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');
        });
    });
}

'You can see an almost working example of what I have at www.menuhead.net/index.php

Change the $(document).change to $(you kitty id list).change...