通过jquery使用ajax寻找当前分类的下一级分类

1、工作原理

     例如两个下拉框，通过点击第一个一级分类，通过onchange事件获取当前分类下的二级分类

HTML代码如下：

   产品分类：<span class="select-box"style=" width:150px;height: 31px">
<select name="category" class="select" id="cat_idA" οnchange="show_catinfo(this,'B')">//this代表当前的select选择框
   <option value="0">请选择产品分类</option>
<foreach name="categorys" item="v" >
<option value="<?php echo $v['cat_id'] ?>"><?php echo $v['cat_name'] ?></option>
</foreach>
</select>
</span>
所属系列：<span class="select-box"style=" width:150px;height: 31px">
   <select name="cat_id" id="cat_idB" class="select">
<option value='0'>-请选择-</option>
   </select>
</span>

 js代码：

   通过ajax加载出下一级分类

    <script type="text/javascript">
var catinfo = new Array();//声明一个缓存变量，存储获得出来的分类信息
 //根据当前分类 自动关联获取次级分类信息
 function show_catinfo(obj,mark){
   var cat_ida = $(obj).val(); //获得当前分类的id信息
   if(typeof catinfo[cat_ida] === 'undefined'){
     //通过ajax获取次级分类信息
     $.ajax({
       url:"__MODULE__/Category/getCatInfoB",
       data:{'cat_ida':cat_ida},
       dataType:'json',
       async:false,
       type:'get',
       success:function(msg){
         //console.log(msg);[Object { cat_id="5", cat_name="电子书"}, Object { cat_id="6", cat_name="数字音乐"}, Object { cat_id="7", cat_name="音像"}]
         //遍历msg，使得数据 与 html代码结合并追加给页面
         //m为键，n为遍历到的dom对象
         var s = "";
         $.each(msg,function(m,n){
           s += '<option value="'+n.cat_id+'">'+n.cat_name+'</option>';
         });


         catinfo[cat_ida] = s; //缓存请求过的分类信息
       }
     });
   }
   $('#cat_id'+mark+' option:not(:first)').remove(); //删除旧的
   $('#cat_id'+mark).append(catinfo[cat_ida]); //追加新的
 }
</script>