html部分
<select name="level1">
<option>无设置商品分类,请先去设置</option>
</select>
<select name="level2">
</select>
<select name="level3">
<option value=""></option>
</select>
script部分
<!--分类联动代码-->
<script>
var classifys = [{"id":"1","pid":"0","name":"\u96f6\u98df1","level":"1"},{"id":"2","pid":"1","name":"\u996e\u6599","level":"2"},{"id":"3","pid":"2","name":"\u53ef\u53e3\u53ef\u4e50","level":"3"},{"id":"4","pid":"2","name":"\u96ea\u78a7","level":"3"},{"id":"5","pid":"0","name":"\u73a9\u5177","level":"1"},{"id":"14","pid":"5","name":"\u5927\u73a9\u5177","level":"2"},{"id":"7","pid":"5","name":"\u5c0f\u73a9\u5177","level":"2"},{"id":"8","pid":"2","name":"\u67c3\u6aac\u6c34","level":"3"},{"id":"9","pid":"1","name":"\u5c0f\u5403","level":"2"},{"id":"10","pid":"9","name":"\u5305\u5b50","level":"3"},{"id":"11","pid":"1","name":"\u4fdd\u5065","level":"2"},{"id":"12","pid":"11","name":"\u7ef4\u751f\u7d20C","level":"3"}];
//渲染分类
function reviewClassify(level,id){
var html = '';
var ischange = false;
var nextid = '';
$(classifys).each(function(index,value){
if(level==1 && value.level==1){
html +='<option value='+value.id+">"+value.name+"</option>";
if(nextid==''){
ischange = true;
nextid = value.id;
}
}else if(level!=1){
if(id == value.pid){
if(!ischange){
ischange = true;
nextid = value.id;
}
html +='<option value='+value.id+">"+value.name+"</option>";
}
}
});
$("select[name='level"+level+"']").html(html);
level += 1;
if(level>3){return;}
reviewClassify(level,nextid);
}
$("select").change(function(){
var id = $(this).val();
var level = parseInt($(this).attr("name").substring(5)); //截取当前level出来
reviewClassify(level+1,id);
});
reviewClassify(1,'');//初始化分类
</script>