应用JScript和XML自定义无刷新多级联动菜单

核心提示： 四、利用DHTML设计级联菜单 DHTML 是一种创建动态和交互 WEB 站点的技术集，通常来说，应用JScript和XML自定义无刷新多级联动菜单(8)，DHTML 意味着 HTML、CSS样式表和 JScript 的组合，HTML用来定义网页元素，脚本部分主要是针对div层的一些鼠标操

四、利用DHTML设计级联菜单

DHTML 是一种创建动态和交互 WEB 站点的技术集。通常来说，DHTML 意味着 HTML、CSS样式表和 JScript 的组合。HTML用来定义网页元素，如段落、表格等。 CSS用来描述元素属性，如大小、颜色、位置等。 脚本语言用来操纵网页元素和浏览器。因此，利用DHTML设计级联菜单自然也从三个方面入手。由于省级、地市级、县级级联菜单的设计方法类似，因此此处仅以省级菜单的设计为例。

省级菜单的HTML部分主要由一个隐藏的input、一个span以及一个div层三部分所组成。其中input用于存储当前选择的省份的国标代码；span用于显示当前选择的省份的名称，其上定义了鼠标的移入、移出以及单击事件；div层用来模拟下拉菜单效果。CSS样式部分主要是定义了div层的一些样式。

脚本部分主要是针对div层的一些鼠标操作的实现，核心代码及解析如下所示：

<script>
function showHide(obj)
{　　　
　　　 //隐现层的函数
　　　 sh={block:"none",none:"block"}
　　　 //隐藏其余菜单的层
　　　 if(document.getElementById("oOption").style.visibility="hidden")
　　　 {
　　　　　　 document.getElementById("oOption").style.visibility="visible";
　　　 }
　　　 if(document.getElementById("oOption2").style.visibility="visible")　　　 {
　　　　　　　 document.getElementById("oOption2").style.visibility="hidden";
　　　 }
　　　 if(document.getElementById("oOption3").style.visibility="visible")　　　 {
　　　　　　 document.getElementById("oOption3").style.visibility="hidden";
　　　 }
　　　 //层的display属性值在"block"和"none"间不断轮换，
　　　 //达到轮换隐藏和显示的效果
　　　 oOption.runtimeStyle.display=sh[oOption.currentStyle.display]
}
</script>
<!--鼠标移上id为oOption的对象时执行本段代码-->
<script event="onmouseover" for="oOption">
obj=event.srcElement
　　　 if(obj.tagName=="TD")
　　　 {
　　　　　　　 //判断onmouseover事件是否发生在单元格上
　　　　　　　 //设置事件发生所在的单元格的背景颜色
　　　　　　　 obj.style.backgroundColor="#dedede"
　　　　　　　 //设置事件发生所在的单元格的字体颜色
　　　　　　　 obj.style.color="#FFFFFF"
　　　 }
</script>
<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<script event="onmouseout" for="oOption">
obj=event.srcElement
　　　 if(obj.tagName=="TD")
　　　 {　　　　　　
　　　　　　　 //判断onmouseout事件是否发生在单元格上
　　　　　　　 //设置事件发生所在的单元格的背景颜色
　　　　　　　 obj.style.backgroundColor="#FFFFFF"
　　　　　　　 obj.style.color="#000000"//设置事件发生所在的单元格的字体颜色
　　　 }
</script>
<!--id为oOption的对象被单击时执行本段代码-->
<script event="onclick" for="oOption">
　obj=event.srcElement
　if(obj.tagName=="TD")
　{
　　　 //判断onmouseover事件是否发生在单元格上
　　　 showHide()　　　　　　　 //隐藏层
　　　 //设置id为oSelect的对象内的文本为被点击的单元格内的文本　　
　　　 oSelect.innerText=obj.innerText
　　　 //设置id为C_Select的对象内的值为被点击的
　　　 //单元格的自定义属性value的值
　　　 C_Select.value=obj.value
　　　 setflag("2");　　　　　 //设置显示省级指示标
　　　 /*
　　　　　　　 用户自定义操作，比如地图跳转
　　　 */
　　　 setblank("oOption2","oSelect2")//清空地级市下拉列表
　　　 setblank("oOption3","oSelect3")//清空县（市）下拉列表
　　　 loadcity(obj.value)//加载地级市数据
　 }
</script>