select级联操作(js)-优快云博客

本文链接：https://blog.youkuaiyun.com/klkliang/article/details/84220921

本文介绍了一个简单的级联下拉框示例，当选择不同的国家时，对应的可选城市会动态更新。该示例使用了纯JavaScript实现，无需额外的库依赖。

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>级联操作</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript">
  var data={xz:["选择"],
    china:["北京","天津","上海","南京","深圳","澳门","香港"],
    usa:["纽约","华盛顿","旧金山","洛杉矶"],
    japan:["东京","福田","北海道","大阪"]
  }; //准备数据 
  function selectCity(){
   var sel=document.getElementById("country");
   var opt=sel.options[sel.selectedIndex];
   var cityArr=data[opt.value]; //通过国家的名字得到城市数组
   //把父select中得到的值赋给子select
   var city=document.getElementById("city");
   city.options.length=0; //将id为city的select的选项清空
   for(var i=0;i<cityArr.length;i++){
    var op=new Option(); //创建一个Option对象
    op.text=cityArr[i];
    city.options[i]=op;
   }
  }
 </script>
  </head>
  <body>
 国家：
 <select id="country" name="country" onchange="selectCity();">
  <option value="xz">请选择</option>
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
 </select>
 城市：
 <select id="city" name="city">
  <option>请选择</option>
 </select>
  </body>
</html>

说明：简单实现选择国家，对应的城市select就提供相应的城市。