<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>select组件的演示</title>
<script type="text/javascript">
function selectCtiy(){
var citys=[['选择城市'],
['海淀区','东城区','西城区','朝阳区'],
['益阳','长沙','株洲','湘潭'],
['杭州','宁波','金华','温州'],
['南昌','九江','萍乡','上饶']];
var nameseild=document.getElementById("seild");
var seildsubnm=document.getElementById("subseild");
var index=nameseild.selectedIndex;
var city=citys[index];
/* 方法一：*/
for(var xs=1;xs<seildsubnm.options.length;){/*这里是每次删除一个options数组 */
seildsubnm.removeChild(seildsubnm.options[xs]);
}
/* 发二： 设置右边那个select组件的长度只有一个*/
//seildsubnm.length=1;/* 这个地方是设置右边那个select组件的长度只有一个，轻松的清除前面的所有节点；*/
for(var i=0;i<city.length;i++){
var optionNode=document.createElement("option");/* 这个地方是制造一个新元素 */
optionNode.innerHTML=city[i];
seildsubnm.appendChild(optionNode);/*将新元素贴加到select组件上 */
}
}
/*这个地方的方法是采用了map集合的方式 */
function select2(){
var colctiys={ "defalut":['选择城市'],
"beijin":['海淀区','东城区','西城区','朝阳区'],
"hunan":['益阳','长沙','株洲','湘潭'],
"zhejiang":['杭州','宁波','金华','温州'],
"jiangxi":['南昌','九江','萍乡','上饶']
};
var oseildNode=document.getElementById("seild2");
var oseildNode2=document.getElementById("subseild2");
var index=oseildNode.selectedIndex;
var optionNode=oseildNode.options[index];
var keys=optionNode.value;
var cties=colctiys[""+keys];

oseildNode2.length=1;
for(var i=0;i<cties.length;i++){
var optionsd=document.createElement("option");
optionsd.innerHTML=cties[i];
oseildNode2.appendChild(optionsd);
}
}

</script>
</head>
<body>
<select id="seild" onchange="selectCtiy()">
<option>请选择省份</option>
<option>北京</option>
<option>湖南</option>
<option>浙江</option>
<option>江西</option>
</select>
<select id="subseild">
<option>请选择城市</option>
</select>

<!-- 这个地方的区别在于option里面也必须设置value值 -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="seild2" onchange="select2()"><!-- 这个地方出错了一次是因为上面的function函数少写了个{,但只在这一行报错。 -->
<option value="defalut">请选择省份</option>
<option value="beijin">北京</option>
<option value="hunan">湖南</option>
<option value="zhejiang">浙江</option>
<option value="jiangxi">江西</option>
</select>

<select id="subseild2">
<option>请选择城市</option>
</select>

</body>
</html>

select组件2的更多相关文章

  1. 改变select组件的option选中状态的快捷方法

    以前我都是在<option>标签处通过判断value是否与其中一个相同然后输出selected="selected"来处理的,今天发现可以直接能过Js改变<sel ...

  2. select组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 如何实现select组件的选择输入过滤作用

    实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / (function ( $ ) { $. ...

  4. freemarker写select组件（一）

    freemarker写select组件 1.宏定义 <#macro select id datas> <select id="${id}" name=" ...

  5. freemarker写select组件报错总结（一）

    1.具体错误如下 六月 25, 2014 11:26:29 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template pr ...

  6. freemarker写select组件（五）

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  7. freemarker写select组件（四）

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  8. freemarker写select组件（三）

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  9. freemarker写select组件（二）

    freemarker写select组件 1.宏定义 <#macro select id datas value=""> <select id="${id ...

随机推荐

  1. ActionBar官方教程(3)更改标题处的图片

    Using a logo instead of an icon By default, the system uses your application icon in the action bar, ...

  2. hdu4714Tree2cycle

    链接 树上的一些操作还是不是太好想 直接dfs下去 不是最优的 一个节点最多保留两个度 如果它有两个以上的子节点 那么就与父节点断开 与k-2个子节点断开 再重新连 #pragma comment(l ...

  3. C#微信公众号开发系列教程（接收事件推送与消息排重）

    微信服务器在5秒内收不到响应会断掉连接,并且重新发起请求,总共重试三次.这样的话,问题就来了.有这样一个场景:当用户关注微信账号时,获取当前用户信息,然后将信息写到数据库中.类似于pc端网站的注册.可 ...

  4. 定制属于自己的自动化安装的linux系统镜像

    使用软件和平台 1.基于平台:                  Vmware workstation 8.0 2.基于系统镜像:               rhel-server-5.8-i386 ...

  5. win7无法识别U盘，驱动信息：该设备的驱动程序未被安装。 (代码 28)

    台式机的win7 64位系统可以识别u盘,但笔记本的win7 64位却识别不了,说明U盘是可以用的.查看笔记本的设备管理器,发现驱动安装失败,提示信息为“该设备的驱动程序未被安装. (代码 28) ” ...

  6. 【转】关于usr/bin/ld: cannot find -lxxx问题总结

    原文网址:http://eminzhang.blog.51cto.com/5292425/1285705 /usr/bin/ld: cannot find -lxxx问题总结   linux下编译应用 ...

  7. java.util.concurrent.Exchanger应用范例与原理浅析--转载

    一.简介   Exchanger是自jdk1.5起开始提供的工具套件,一般用于两个工作线程之间交换数据.在本文中我将采取由浅入深的方式来介绍分析这个工具类.首先我们来看看官方的api文档中的叙述: A ...

  8. testng 注解

    testng.xml suite(套件):  由一个或多个测试组成 test(测试):  由一个或多个类组成 class(类):  一个或多个方法组成 @BeforeSuite: 在某个测试套件开始之 ...

  9. 【原】Spark中Master源码分析（二）

    继续上一篇的内容.上一篇的内容为: Spark中Master源码分析(一) http://www.cnblogs.com/yourarebest/p/5312965.html 4.receive方法, ...

  10. windows下virtualenv使用报错

    virtualenv为python提供了一个独立的虚拟环境,使各种python依赖库的安装相互独立.在家里ubuntu上安装一切正常,但在公司的win7上安装总是报以下错误: "D:\Pro ...