<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<script>
var city=[["北京","天津","上海","重庆"] ]
function getCity(){
var sltProvince=document.getElementById("province")
var sltCity=document.getElementById("city")
var provinceCity=city[sltProvince.selectedIndex-1]
sltCity.length=1
for(var i=0i<provinceCity.lengthi++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i])
}
}
//这里就是取当前被选中的下拉框的值。
function showInfo(){
var sltProvince=document.getElementById("province")
var sltCity=document.getElementById("city")
for(var i=0i<sltCity.lengthi++){
if(sltCity.options[i].selected)
document.getElementById("cityValue").innerHTML=sltCity.options[i].value
}
for(var i=0i<sltProvince.lengthi++){
if(sltProvince.options[i].selected)
document.getElementById("pro").innerHTML=sltProvince.options[i].value
}
}
</script>
</head>
<BODY>
<form action="somepage.asp" name=theForm">
<select name="province" id="province" onchange="getCity()">
<option value="0" selected>请选择所在省份</option>
<option value="直辖市">直辖市</option>
</select>
<select id="city" name="city">
<option value="0">请选择所在城市</option>
</select>
<input type="button" onclick="showInfo()"/>
</form>
<div id="showvalue">
省份：<span id="pro"> </span> 城市 ： <span id="cityValue"> </span>
</div>
</BODY>
</HTML>
自己写的。测试了。看看是不是你想要的结果。
鼠标移出导航二级菜单就消失是因为二级菜单没有在导航容器内，所以mouseout条件满足了，自然就消失了。<!--一级导航-->
<ul class='menu'>
<li class='menu-lei'>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
</li>
<li class='menu-lei'>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
</li>
...
</ul>
结果改成这样就行了，这样二级菜单在导航容器内，所以不会由于mouseout条件必须满足从二级菜单移出才会执行。
$(".menu_lei").each(function(){
$(this).mouseover(function(){
$(this).find(".menu-sub").show()
})
$(this).mouseout(function(){
$(this).find(".menu-sub").hide()
})
})
