<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<script>
var data = { '中国':
{
'北京': false,
'上海': false,
'江苏':
{
'南京': false,
'苏州': false
},
'浙江':
{
'杭州':
{
'西湖区': false,
'拱墅区': false
},
'宁波': false,
'嘉兴': false
}
},
'美国':
{
'华盛顿': false,
'德克萨斯': false
}
};
function change(el, d)
{
d = d || data;
while (el.nextSibling) //nextSibling可以获取当前dom对象的下一个对象,（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。
{
el.parentNode.removeChild(el.nextSibling); //childNodes：表示对象的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性;parentNode：表示对象的父级节点。 removeChild删除子节点，xxx.removeChild(obj) xxx是所删除节点的父节点。
}
var text = el.options[el.selectedIndex].text, sub = d[text];
if (sub)
{
var sel = document.createElement('select');
sel.add(new Option('请选择', ''), null);
//或者写成sel.options[sel.options.length]=new Option('请选择'，''); s.options.length 新创建的节点的成员个数，随着程序不断递增,第一个参数代表option标签包着的字符串，而第二个参数代表option选项的value值。
for (var i in sub)
{
sel.add(new Option(i, ''), null);
}
sel.onchange = function()
{
change(sel, sub);
};
el.parentNode.appendChild(sel); //追加一个子节点XXX.appendChild(),XXX代表以哪个节点作为父级节点，
}
document.getElementById('console').innerHTML = text == '请选择' ? '' : text;
};
</script>
</head>
<body>
<div>
<select onchange="change(this)">
<option>请选择</option>
<option>美国</option>
<option>中国</option>
</select>
</div>
<div id="console">
</div>
</body>
</html>