# 下拉联动无序列表功能
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* 创意，设计能力
* 【增加用户，增加利润】
*
*
* 实现能力【实现业务，实现体验】
*/
var datas={"扬州":[{"name":"绞面"},{"name":"富春包子"},{"name":"三洋干丝"}],
"南通":[{"name":"皮肚"},{"name":"鳗鱼"}],"南京":[{"name":"桂花鸭"},{"name":"莲湖糕团"},
{"name":"汪家馄饨"},{"name":"皮肚面"}]};
function getCityValue(selectObj)
{
//alert("内容改变");
//1.通过document.getElementById("id名称");
// var selectObj=document.getElementById("selectCitys");
// console.log(selectObj);
var selectValue=selectObj.value;
console.log(selectValue);
if(selectValue==-1)
{
alert("请选择具体的城市名称");
return;
}
var arrays=datas[selectValue];
console.log(arrays);
var strs="<ul>";
//document.write("<ul>");
for(var a in arrays)
{
//<ul><li>烧麦</li><li>馄饨</li>....
//document.write("<li>"+arrays[a].name+"</li>");
strs+="<li>"+arrays[a].name+"</li>";
console.log(strs);
}
strs+="</ul>";
//document.write("</ul>");
console.log(strs);
//获取p标签对象
var innerObj=document.getElementById("cityfood");
//嵌入html内容
innerObj.innerHTML=strs;
}
</script>
</head>
<body>
<!--onchange事件：内容改变触发事件或者动作
-->
<!--下拉选择框 this卸载哪个标签中，就是代表哪个标签对象-->
<select id="selectCitys" name="citys" onchange="getCityValue(this)">
<option value="-1">请选择城市名称:</option>
<option value="扬州">扬州</option>
<option value="南通">南通</option>
<option value="南京">南京</option>
</select>
<p id="cityfood"></p>
<hr>
<select name="school">
<option>请选择学生:</option>
<optgroup label="zte_3 ">
<option>严兴鹏</option>
<option>张勇</option>
</optgroup>
<optgroup label="zte_2 ">
<option>郭超男</option>
<option>黄佳燕</option>
</optgroup>
</select>
</body>
</html>
~~~
