<!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. hdu4662MU Puzzle

    http://acm.hdu.edu.cn/showproblem.php?pid=4662 I+3*U模6为2或4的都可以 一个U相当于3个I  而I只能1->2->4->8..如 ...

  2. Webform——服务器控件与客户端控件

    Webform,即BS,浏览器应用. 关于服务器和客户端,在Webform 中,  服务器就相当于后台(也就是编辑C#代码的地方), 客户端相当于前台(也就是Html页面). 用法: ①如果想在服务器 ...

  3. poj1988

    知道了并查集写的问题后,我也明白了为什么之前这道题TLE的原因: 有这道题的合并操作不难想到用并查集维护: 由于并查集易于向上查询而不易于向下查询 所以对于询问方块x下面有多少个方块,我们可以转化为立 ...

  4. JVM内存模型及内存分配过程

    一.JVM内存模型 JVM主要管理两种类型内存:堆(Heap)和非堆(Permanent区域). 1.Heap是运行时数据区域,所有类实例和数组的内存均从此处分配.Heap区分两大块,一块是 Youn ...

  5. 将win7电脑变身WiFi热点

    转自:http://bbs.feng.com/read-htm-tid-2167498.html 开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路 ...

  6. MySql配置参数很全的Mysql配置参数说明

    MySql配置参数 很全的Mysql配置参数说明 1. back_log 指定MySQL可能的连接数量.当MySQL主线程在很短的时间内得到非常多的连接请求,该参数就起作用,之后主线程花些时间(尽管很 ...

  7. NOIP2011普及组 瑞士环 保序性

    题目链接:http://noi.openjudge.cn/ch0401/4363/ 分析:如果直接模拟,时间复杂度是O(r*nlogn)超时 然后我们发现每次一轮开始时,刚开始是保序的,然后我们可以把 ...

  8. 【解决】HDFS HA无法自动切换问题

    [解决]HDFS HA无法自动切换问题 原因: 最早设置为root互相登录,可是zkfc服务是hdfs账号运行的,没有权限访问到root的id_rsa文件.更改为hdfs账号免密钥登录恢复正常.   ...

  9. HW3.7

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  10. UOJ#191. 【集训队互测2016】Unknown

    题意:维护一个数列,每个元素是个二维向量,每次可以在后面加一个元素或者删除一个元素.给定P(x,y),询问对于[l,r]区间内的元素$S_i$,$S_i \times P$的最大值是多少. 首先简单地 ...