下拉菜单联动显示(读数据库)

jerry thinkphp 2015年11月19日 收藏
点击最初的下拉菜单选择板块内容~然后读取数据库获取下级分类,然后jq输出分类的下级菜单~并且绑定同一个事件,修改后也许就可以应用到你们项目中;用jquery写的,第一次分享,觉得不好的请轻喷~~
js代码如下:
  1. $(".js_type").live('change',function(){
  2.         var _this=$(this);
  3.         var _this_id=_this.attr('id');
  4.         var url='<!--{:U("Lib/ajaxType")}-->';
  5.         var $v=_this.val();
  6.         _this.nextAll("select").remove();
  7.         switch(_this_id){
  8.             case 'js_plateid':{
  9.                 var data='plateid='+$v;
  10.             } break;
  11.             case 'js_pid': var data='uid='+$v; break;
  12.         };
  13.         $('<span>',{'class':'loadPtype'}).insertAfter(_this);
  14.         $('.loadPtype').text("加载中...");
  15.         $.ajax({
  16.             'url':url,
  17.             'type':'POST',
  18.             'data':data,
  19.             'success':function(data){
  20.                 var obj=jQuery.parseJSON(data);
  21.                 var option='';
  22.                 if(obj!=null){
  23.                     switch(_this_id){
  24.                         case 'js_plateid':{
  25.                             var $new_select=$('<select>',{'class':'js_type','id':'js_pid'});
  26.                         };break;
  27.                         case 'js_pid':{
  28.                             var $new_select=$('<select>',{'name':'subtypeid'});    
  29.                         };break;
  30.                     }
  31.                     $new_select.insertAfter(_this);
  32.                     $('.loadPtype').remove();
  33.                     for(var i=0;i<obj.length;i++){
  34.                         option+="<option value="+obj[i].typeid+">"+obj[i].typename+"</option>";
  35.                     }
  36.                     $new_select.html(option);
  37.                 }else{
  38.                     $(".loadPtype").text('无二级分类');
  39.                 } 
  40.             }
  41.         });
  42.     });
html代码:
<select class='js_type' id='js_plateid' >
<option value='0'>选择板块</option>
<option value='1'>板块1</option>
<option value='2'>板块2</option>
<option value='3'>板块3</option>
</select>