ajax php mysql无限级联菜单 联动菜单 二级联动 三级联动菜单

ajax php mysql无限级联菜单 联动菜单 二级联动 三级联动菜单

无限级联菜单 联动菜单 二级联动 三级联动菜单
有几个级别的菜单就显示级别

本例是《ajax php 动态读取的级联菜单 联动菜单》的扩展，由二级联动扩展到无限级

演示

 

 

XML/HTML Code

<div id="show_sub_categories">
        <select name="search_category" class="parent">
        <option value="" selected="selected">-- Categories --</option>
        <?php
        $query = "select * from ajax_categories where pid = 0";
        $results = mysql_query($query);

        while ($rows = mysql_fetch_assoc(@$results))
        {?>
            <option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>
        <?php
        }?>
        </select>

    </div>

 

JavaScript Code

<script type="text/javascript">

$(document).ready(function() {

    //$('#loader').hide();

    $('.parent').livequery('change', function() {

        $(this).nextAll('.parent').remove();
        $(this).nextAll('label').remove();

        $('#show_sub_categories').append('<img src="loader.gif" style="float:left; margin-top:7px;" id="loader" alt="" />');

        $.post("get_chid_categories.php", {
            parent_id: $(this).val(),
        }, function(response){

            setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
        });

        return false;
    });
});

function finishAjax(id, response){
  $('#loader').remove();

  $('#'+id).append(unescape(response));
}

</script>

 

原文地址:http://www.freejs.net/article_biaodan_290.html