您的位置：首页 > Web前端 > JavaScript

javascript实现动态关联菜单

2007-01-13 19:24 411 查看

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function setcity() {

switch (document.shengshi.sheng.value) {
case '河北' :
var labels = new Array("石家庄","沧州","唐山");
var values = new Array("sjz","cz","ts");
break;
case '山东' :
var labels = new Array("济南","青岛","烟台");
var values = new Array("jn","qd","yt");
break;
}
// 清空市列表选择框的内容
document.shengshi.city.options.length = 0;
// 从数组中添加内容
for(var i = 0; i < labels.length; i++) {
document.shengshi.city.add(document.createElement("OPTION"));
document.shengshi.city.options[i].text=labels[i];
document.shengshi.city.options[i].value=values[i];
}

// 选择第一个选项

document.shengshi.city.selectedIndex = 0;

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="shengshi">
<table name="tbl" border="1">
<tr>
<td>省:</td>

<td><SELECT NAME="sheng" OnChange="setcity()">
<OPTION VALUE="河北">河北</OPTION>
<OPTION VALUE="山东" SELECTED>山东</OPTION>
</SELECT></td>
<td>市:</td>
<td><SELECT NAME="city"></SELECT></td>
</tr>
</table>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
setcity();
</SCRIPT>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航