需要注意的是当需要动态添加项的时候一定要
先var newoption=new Option("项","值");
然后再 select.options.add(newoption);
这样才能添加进去
代码如下：

<html>

<head>

<script language="javascript">

 function changeSever()

 {

  var newop1,newop2;                              //声明两个变量用来添加Option项

  switch(document.form1.select1.value)            //判断选择的项,注意这里是值不是所选的项,是所选项的值

  {

   case "lt":

    newop1=new Option("雷霆1区","lt1");

    newop2=new Option("雷霆2区","lt2");

    break;

   case "ty":

    newop1=new Option("天涯1区","lt1");

    newop2=new Option("天涯2区","lt2");

    break;

  }

  document.form1.select2.options.length=0;          //把所有的项清空

  document.form1.select2.options.add(new Option("请选择相应的服务器"));

  document.form1.select2.options.add(newop1);       //添加项

  document.form1.select2.options.add(newop2);

 }

</script>

</head>

<body>

<form name="form1" method="post" action="">

  <select name="select1" onChange="changeSever()">         //父下拉框

    <option selected>请选择所在区</option>

    <option value="lt">雷霆</option>

    <option value="ty">天涯</option>

  </select>

  <p><select name="select2">                             //子下拉框

    <option>请选择服务器</option>

  </select>

</form>

</body>

</html>

Js实现简单的省市级联的效果的更多相关文章

  1. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  2. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  4. JavaScript实现省市级联效果实例

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

  5. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  6. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

  7. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  8. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  9. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

随机推荐

  1. js基本算法：冒泡排序，二分查找

    知识扩充: 时间复杂度:算法的时间复杂度是一个函数,描述了算法的运行时间.时间复杂度越低,效率越高. 自我理解:一个算法,运行了几次时间复杂度就为多少,如运行了n次,则时间复杂度为O(n). 1.冒泡 ...

  2. Android studio 克隆分支

    1.当远程仓库有两个分支时,像这样的 获得分支的远程仓库地址 注意:这个地址默认就是克隆master 分支 2.如何克隆 v1.2 分支 ? 用android studio 把项目打开,可以看到 此时 ...

  3. BMP图像数据格式详解

    一．简介 BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式.Windows系统内部各图像绘制操作都是以B ...

  4. 开发Android系统内置应用小记

    Android系统内置应用可以使用更多的API.更高的权限,与开发普通应用最大的差别在于编译,内置应用编译需要用到Android.mk文件.下面是我在开发过程中的一些小记. 1.在AndroidMai ...

  5. Android 视频播放器进度的处理

    在前面的项目中添加SeekBar <SeekBar android:id="@+id/sb" android:layout_width="match_parent& ...

  6. IOS动画

    基础动画 //创建基础动画    CABasicAnimation * basic = [CABasicAnimation animation];    //动画路径    basic.keyPath ...

  7. 安卓开发基础之tween动画基本使用，代码教学

    xml代码块: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:andro ...

  8. js简单解密（eval解密）

    今天看博客园文章,看到一篇比较好的文章. 今天又学会一招,可以对一些采用eval加密的js进行解密. 打开谷歌或者火狐浏览器,然后按 F12,接着把这代码复制进去, 最后,去掉开头 4 个字母 eva ...

  9. 通过dubbo暴露接口调用方法，及基于zookeeper的dubbo涉及配置文件

    现在很流行的Dubbo很多朋友都听说过吧,最近我也在看这方面的东西,分享先我的心得笔记. 先说说我们团队要做的项目框架,很简单重在实现基于zookeeper的dubbo注册. 框架:springmvc ...

  10. SQL server基础知识（表操作、数据约束、多表链接查询）

    SQL server基础知识 一.基础知识 (1).存储结构:数据库->表->数据 (2).管理数据库 增加:create database 数据库名称 删除:drop database ...