Json做的级联菜单

最新推荐文章于 2019-01-10 16:05:37 发布

最新推荐文章于 2019-01-10 16:05:37 发布 · 177 阅读

文章标签：

#json #CSS #HTML

Ext 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>



<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext/ext-all.js"></script>



<script type="text/javascript">

var provience=[{

name:"山东",

pass:"shandong"

},{

name:"河南",

pass:"henan"

}];

var city=[{

pro:"shandong",

citys:[{

name:"济宁",

value:"jining"

},{

name:"济南",

value:"jinan"

}]

},{

pro:"henan",

citys:[{

name:"洛阳",

value:"luoyang"

},{

name:"新乡",

value:"xinxiang"

}]

}];

function load(){

var len=provience.length;

var sels=document.getElementById("provience");

for(var i=0;i<len;i++){

sels.options.add(new Option(provience[i].name,provience[i].pass));

}

}

function funch(){

var len=city.length;

var sels=document.getElementById("city");

sels.options.length=0;

var provalue=document.getElementById("provience").value;

for(var i=0;i<len;i++){

if(city[i].pro==provalue){

var citys=city[i].citys;

for(var j=0;j<citys.length;j++)

sels.options.add(new Option(citys[j].name,citys[j].value));

}

}

}

</script>

</head>

<body onload="load();">

请选择省份:<select id="provience" onchange="funch();" style="width:100">

<option value="-1">==请选择==</option>

</select>

<br/>

请选择城市:<select id="city" style="width:100">

<option value="-1">==请选择==</option>

</select>

</body>

</html>