select级联操作(js)

最新推荐文章于 2019-07-22 19:22:17 发布

klkliang

最新推荐文章于 2019-07-22 19:22:17 发布

阅读量292

点赞数

分类专栏： PageView 文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/klkliang/article/details/84220921

版权

PageView 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ 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" οnchange="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就提供相应的城市。

klkliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select级联操作(js)

&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &
复制链接

扫一扫

专栏目录