根据分类深度创建多级分类下拉列表-select多级分类

广告：阿里云采购优惠专区

<script type="text/javascript">
$("#liveclass").ready(function() {
var l = document.getElementById("liveclass");
l.innerHTML = "";
var depths=<%=Depth%>;
var fileurl="jquery/Liveclass.aspx";
startclass(depths,l);
loadclass(0, 0, 0,depths,fileurl); //深度0,parentid=0,nowid,depths,url
});
</script>

class.js文件：

function startclass(depths,ldiv) { // 深度 初初化select
for (i = 0; i <= depths; i++) {
var ndiv = newdiv(i); //创建seldiv
var selid = "sel" + i;
var se = document.createElement("select"); //创建select
se.name = selid;
se.id = selid;
opt(se,"请选择","",0)
var object = ndiv.appendChild(se);
ldiv.appendChild(ndiv);
}
}

function loadclass(depth, pid, nowid, depths, fileurl) { //五个参数：当前深度,参数父id,liveclass层,当前选中的id(0为未选中)
//se.options[0] = new Option("请选择", "");
//这里开始加载数据
var selid = "sel" + depth;
var se = document.getElementById(selid); //取得select
for (i = depth; i <= depths; i++) {
var sel = document.getElementById("sel" + i);
sel.options.length = 0;
opt(sel, "请选择", "", 0); //opt--------opt
}
Optionadd(pid, se, nowid, fileurl)
//这里加载数据完
//se.size = "2";
if (depth<depths)
{
depth++;
$("#" + selid).change(function() {//载入下级分类数据;
var tempv=this.options[this.selectedIndex].value;
if (tempv != "")
{ loadclass(depth, tempv, 0, depths, fileurl); }
else
{
for (i = depth; i <= depths; i++) {
var sel = document.getElementById("sel" + i);
sel.options.length = 0;
opt(sel, "请选择", "", 0); //opt--------opt
}
}
});
}
}

function Optionadd(pid, sel, nowid, fileurl) { //pid父类id ,sel,nowid现在正在的nowid----创建多个option
//分类开始载入
$.ajax({
type: "POST",
url: fileurl, //
dataType: "json",
data: { "p": "" + pid + "" }, //p传输的参数
success: function(json) {
if (json != 0) {
var issel = 0;
for (i = 0; i < json.classtable.length; i++) { //json为回传的数据；"classtable"表名在回传的json数据
issel = 0
if (json.classtable[i].id == nowid) {
issel = 1;
}
opt(sel, json.classtable[i].classname, json.classtable[i].id, issel); //opt--------opt
}
}

}, error: function(json) { alert("error-$.ajax" + json); }
});
//分类载入数据完
}


//创建单个option
function opt(sel, txt, value, issel) { //opt--------opt
var op = document.createElement("option");
op.value = value;
op.text = txt;
if (issel==1)
op.setAttribute("selected", "selected");
sel.options.add(op);
}

//创建div层
function newdiv(i) {
var ndiv = document.createElement("div");
ndiv.id = "seldiv" + i;
ndiv.className = "seldiv";
ndiv.setAttribute("name", "seldiv" + i);
return ndiv;
}

/*
原创：郝海波 www.53bk.com QQ:28094735
ndiv.style.border = '1px solid #DDD';
var newText = document.createTextNode('这是新建立div中的文字。');
ndiv.appendChild(newText);
appendChild() 方法在节点的子节点列表末添加新的子节点。
　　 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
　　 l.insertBefore(ndiv1,ndiv2);　　插入ndiv1;
　　 l.removeChild(div1);
　 */

广告：阿里云新人采购专场