需要注意的是当需要动态添加项的时候一定要
先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. vncserver安装

    我的环境是centos6.5,如果没有安装桌面,先执行: # yum groupinstall "X Window System" "Desktop" # yu ...

  2. android 多线程下载 断点续传

    来源:网易云课堂Android极客班第八次作业练习 练习内容: 多线程 asyncTask handler 多线程下载的原理 首先获取到目标文件的大小,然后在磁盘上申请一块空间用于保存目标文件,接着把 ...

  3. (视频)《快速创建网站》 3.3 国际化高大上 － WordPress多语言支持

    本文是<快速创建网站>系列的第7篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  4. yii2整合百度编辑器umeditor

    作者:白狼 出处:www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...

  5. ThreadLocal源码分析

    1.概述 ThreadLocal,可以理解为线程的局部变量,作用就是为每一个使用该变量的线程都提供一个变量值的副本,每一个线程都可以独立地改变自己的副本,而不会和其它线程的副本冲突. ThreadLo ...

  6. eclipse配置文件导出问题

    关于eclipse配置文件导出问题 eclipse的默认配置一般不能满足我们的要求,我们一般会修改一些配置,如字体.背景颜色.快捷键及一些template等等,这样方便我们的开发.可是当我们新建一个工 ...

  7. java环境变量 windows centos 安装jdk

    windows: 1.安装jdk,注意不是jre 2. 计算机→属性→高级系统设置→高级→环境变量,选择下面的那个系统环境变量 3. 系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安 ...

  8. CentOS 下JDK安装

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  9. 利用phpmyadmin修改mysql的root密码及如何进入修改密码后的phpmyadmin

    1.利用phpmyadmin修改mysql的root密码 很多人利用phpmyadmin或者命令行来修改了mysql的root密码,重启后发现mysql登录错误,这是为什么呢?修改mysql的root ...

  10. Angularjs之如何在跨域请求中传输Cookie

    一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可. 如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现 ...