变换的下拉选择菜单

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变换的下拉选择菜单</title>
<style>
	#sub1, #sub2, #sub3
	{ position: absolute;
	  left: 480px;
	  visibility: hidden;
	  z-index: 3
	}
</style>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
catnumber = 3
offset = 150
performOnchange = false
if (document.all) {
  docObj = "document.all."
  styleObj = ".style"
  } else {
  docObj = "document."
  styleObj = ""
}
function openselect(subcat) {
  popupselect = eval(docObj + subcat + styleObj)
  popupselect.visibility = "visible"
}
function closeselect(submenu,subcat){
  popupselect = eval(docObj + subcat + styleObj)
  if (submenu.selectedIndex != 0) {
    popupselect.visibility = "hidden"
    numchoice = submenu.selectedIndex
    choice = submenu[numchoice].value
    subcategory.value = choice
    submenu.selectedIndex = 0
  }
}
function lock() {
  performOnchange = false
}
function unlock() {
  performOnchange = true
}
function selectSub(cat) {
  for (i=1; i <= catnumber; i++) {
    subcat = "sub" + i
    popupselect = eval(docObj + subcat + styleObj)
    popupselect.visibility = "hidden"
  }
  if (performOnchange == true) {
    letsopen = "sub" + cat.selectedIndex
    if (letsopen == "sub0") {
      alert("No category selected")
      choice = "- subcategory -"
      subcategory.value = choice
      cat.focus()
      } else {
      openselect(letsopen)
      lock()
    }
  }
}
//  End -->
</script>
<div align="center">
<span id="sub1">
  <select name="subannounce" onchange="closeselect(this,'sub1')">
    <option selected value="">- 综合性站点 -
    <option value="新浪网">新浪网
    <option value="搜狐">搜狐
    <option value="网易">网易
  </select>
</span>
<span id="sub2">
  <select name="subarts" onchange="closeselect(this,'sub2')">
    <option selected value="">- 艺术性站点 -
    <option value="chinamp3">chinamp3
    <option value="通海微雕">通海微雕
    <option value="painting">painting
  </select>
</span>
<span id="sub3">
  <select name="subsoftware" onchange="closeselect(this,'sub3')">
    <option selected value="">- 体育类站点 -
    <option value="中国足球网">中国足球网
    <option value="中国篮球网">中国篮球网
    <option value="NBA">NBA
    <option value="新浪体育">新浪体育
  </select>
</span>
  <select name="categoria" onmouseover="unlock()" onchange="selectSub(this)">
    <option selected value="">-- 选择站点类型 --
    <option value="综合性站点">综合性站点
    <option value="艺术性站点">艺术性站点
    <option value="体育类站点">体育类站点
  </select><br>
<input type="text" name="subcategory" readonly="readonly" value="- 选择具体站点 -">
</div>
</body>
</html>
上一个：Select美化效果，运用jQuery插件
下一个：jQuery适时控制文本域内容上下滚动
更多图片编程知识: