JS 下拉菜单和下拉菜单的关联

最新推荐文章于 2025-08-23 02:53:08 发布

wangdingjun0

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

文章标签： javascript function

本文链接：https://blog.youkuaiyun.com/wangdingjun0/article/details/2157351

本文介绍了一个简单的省市联动下拉菜单实现方案，通过JavaScript根据所选省份动态更新对应城市列表。示例中包括河北与山东两省及其下属城市的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个省市之间用下拉菜单和下拉菜单的关联，简单却明了的实现过程

<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>

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

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