下拉框联动

最新推荐文章于 2025-07-24 10:02:24 发布

原创最新推荐文章于 2025-07-24 10:02:24 发布 · 561 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #action #each #html #null

JAVASCRIPT学习笔记专栏收录该内容

21 篇文章

订阅专栏

<html>
 
<head>
 
<title>Related Select Test</title>
 
<meta http-equiv="content-type" content="text/html; charset=GBK" />
 
<script type="text/javascript"> 
 
<!--
 
// Create an array to hold the cities for each country
 
var cities = new Array(4);
 
cities["Australia"] =
 
      ["Sydney", "Melbourne", "Canberra", "Perth", "Brisbane"];
 
cities["France"] = 
 
      ["Paris", "Lyons", "Nice", "Dijon"];
 
cities["Japan"] = ["Tokyo", "Kyoto", "Osaka", "Nara"];
 
cities["New Zealand"] = 
 
      ["Auckland", "Wellington", "Christchurch", "Dunedin", "Queenstown"];
 
 
 
function removeOptions(optionMenu)
 
{
 
  for (var i=0; i < optionMenu.options.length; i++)
 
    optionMenu.options[i] = null;
 
}
 
 
 
function addOptions(optionList, optionMenu)
 
{
 
 removeOptions(optionMenu);  // clear out the options
 
 for (var i=0; i < optionList.length; i++)
 
	  optionMenu.options[i] = new Option(optionList[i]+"显示内容", optionList[i]);
}
 
//-->
 
</script>
 
</head>
 
<body>
 
<h2>Vacation Chooser</h2>
 
<form name="testform" id="testform" action="#" method="get">
 
Country:
 
<select name="country" id="country"
 
 onchange="addOptions(cities[this.options[this.selectedIndex].text], 
 
                             document.testform.city);">
 
      <option selected="selected">Australia</option>
 
      <option>France</option>
 
      <option>Japan</option>
 
      <option>New Zealand</option>
 
</select>
 
 
 
City:
 
<select name="city" id="city">
 
      <option>Sydney</option>
 
      <option>Melbourne</option>
 
      <option>Canberra</option>
 
      <option>Perth</option>
 
      <option>Brisbane</option>
 
</select>
 
</form>
 
</body>
 
</html>
The previous