# 下拉聯動無序列表功能
~~~
<!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>
~~~
