如果最后没选择,则提交上级id
这个代码适用于不定分类。
首先,页面加载的时候,循环出一个select
例如:
<select name="catid" onchange='changeCategory(this)' id="catgorys"> <option value="1">test1</option> <option value="2">test2</option> <option value="3">test3</option> </select>
然后是js方法
//生成子分类 function changeCategory(obj){ var pid = $(obj).val(); var title = $(obj).attr("title"); var child_id=$(obj).attr("id")+"_child"; var category_name="catid"; if(pid>0 && pid!=title){ $.getJSON("/api/"+pid+".json", function(data){ var h="<select id='"+child_id+"' class='inputbox' title='"+pid+"' name='"+category_name+"' onchange='changeCategory(this)'>"; var data_length=0; h+="<option value='"+pid+"' >请选择</option>"; $.each(data.data, function(i, n){ h+="<option value='"+n.id+"'>"+n.cname+"</option>"; data_length++; }); h+="</select>"; if($("#"+child_id).length>0){ removeChild(obj); } if(data_length>0){ $(obj).after(h); $(obj).attr("name",""); }else{ $(obj).attr("name",category_name); } }); }else{ $("#"+child_id).remove(); $(obj).attr("name",category_name); } } //删除子分类 function removeChild(obj){ var child_id=$(obj).attr("id")+"_child"; if($("#"+child_id).length>0){ removeChild($("#"+child_id)); $("#"+child_id).remove(); } }
第三步,服务器json,以php为例:
查询结果
$data=array(
"data"=array(array("id"=>123,"cname"=>"test123"),array("id"=>124,"cname"=>"test124"),array("id"=>125,"cname"=>"test125"))
);
输出json
header("Pragma: no-cache");
header("Cache-Control: no-store, no-cache, max-age=0, must-revalidate");
header('Content-Type: text/x-json');
header('Content-type: application/json');
echo json_encode($data);
---------------------------支持修改时,动态选中之前的选项-------------------------------------
javascript中:
首先定义全局变量,内容是所有父级编号,以及当前编号的值
例如:var catids=[123,125,129];
php写法
var cat_ids=[]; <?php if(!empty($app["cat_ids_arr"])){?> //分类编号 cat_ids=<?php echo json_encode($app["cat_ids_arr"])?>; <?php }?>
function changeCategory(obj){ var pid = $(obj).val(); var title = $(obj).attr("title"); var child_id=$(obj).attr("id")+"_child"; var category_name="cat_id[]"; if(pid>0 && pid!=title){ $.getJSON("/category/"+pid+"/"+$("input[name='lan_id']").val()+".json", function(data){ var h="<select id='"+child_id+"' class='inputbox' title='"+pid+"' name='"+category_name+"' onchange='changeCategory(this)'>"; var data_length=0; var isSelect=0; h+="<option value='"+pid+"'>请选择</option>"; $.each(data.data, function(i, n){ if(jQuery.inArray(n.id,cat_ids)!=-1){ isSelect=1; h+="<option value='"+n.id+"' selected>"+n.cname+"</option>"; }else{ h+="<option value='"+n.id+"'>"+n.cname+"</option>"; } data_length++; }); h+="</select>"; if($("#"+child_id).length>0){ //$("#"+child_id).remove(); removeChild(obj); } if(data_length>0){ $(".selection-main").append(h); //$(obj).attr("name",""); //$("#"+child_id).selectBox(); }else{ $(obj).attr("name",category_name); } if(isSelect){ changeCategory($("#"+child_id)); } }); }else{ removeChild(obj); //$("#"+child_id).remove(); $(obj).attr("name",category_name); } }
这个就是判断,当前读取的数据中,是否被选中,如果有,则自动递归请求下一级菜单
iif(isSelect){
changeCategory($("#"+child_id));
}