html五级联动下拉框_随笔

按说这种 *** 作应该是后台程序来做，前端 *** 作的话有点窒息，主要是数据量。。亲测有效，望采纳！

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<style>

select{ width:75px font-size:12px color:#000000 font-family:'宋体' margin:auto 0px}

#select0{ background:yellow}

.select{ background:#85e785}

</style>

$(document).ready(function(e) {

$("select#select0").change(function(){

var cc = $(this).find("option:selected").attr("class")

$(this).siblings("select").find("option").hide()

$(this).siblings("select").find("option."+cc).show()

$(this).siblings("select").find("option."+cc+":first").attr("selected","selected")

})

$("select.select").change(function(){

var cid = $(this).find("option:selected").index()

$(this).siblings("select.select").each(function(){

$(this).find("option").eq(cid).attr("selected","selected")

})

</script>

</select>

</select>

</select>

</select>

</select>

</div>

</body>

</html>

用js先写个带参方法，参数就是2级联动的对象obj

写个ajax data参数就是obj.value， value传给后台获取数据返回给ajax，

然后ajax做你想做的页面处理。。。

function getData(obj) {

var opt = obj.options[obj.selectedIndex]

//alert("The option you select is:"+opt.text+"("+opt.value+")")

$.ajax({

url : "你的url",

type : "Post",

data : 'diqu='+opt.value,

success : function(data1) {

//这里面就可以得到你后台获取过来的数据了，你可以做DOM处理

}

})

}

</script>

</SELECT>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6155513.html

html五级联动下拉框

发表评论

评论列表（0条）