简单js代码实现selece二级联动(推荐)


Posted in Javascript onFebruary 18, 2014

以下是html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<!-- by sundful  starting-->
 <BODY>
  <script   language="JavaScript">       var   subcat   =   new   Array();     
  subcat[0]   =   new   Array('中文','英语','英语')     
  subcat[1]   =   new   Array('中文','法语','法语')        
  subcat[2]   =   new   Array('英语','中文','中文')     
  subcat[3]   =   new   Array('法语','中文','中文')         
  function   changeselect1(locationid)     
  {     
  document.form1.s2.length   =   0;   //初始化下拉列表   清空下拉数据     
  document.form1.s2.options[0]   =   new   Option('==请选择==','');   //给第一个值     
  for   (i=0;   i<subcat.length;   i++)   //legth=20     
  {     
  if   (subcat[i][0]   ==   locationid)   //[0]   [1]   第一列   第二列     
  {document.form1.s2.options[document.form1.s2.length]   =   new   Option(subcat[i][1],   subcat[i][2]);}   //建立option     
  //第一次   length=1   因为有==请选择==     
  //i=9时   length=   10   值有11个   因为从0数起   subcat[i][0]   ==   locationid屏蔽了再写     
  }     
  }     
  </script>     
  <form   name="form1"     method="post"   runat="server">     
  二级联动:     
  <select   name="s1"   onChange="changeselect1(this.value)">     
  <option>==请选择==</option>     
  <option   value="中文">中文</option>     
  <option   value="英语">英语</option> 
  <option   value="英语">法语</option> 
  </select>       
  <select   name="s2">     
  <option>==请选择==</option>     
  </select>     
  </form> 
<!-- by sundful  ending-->  
 </BODY>
</HTML>
Javascript 相关文章推荐
奇妙的js
Sep 24 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
超简单JS二级、多级联动的简单实例
Feb 18 #Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 #Javascript
DIV始终居中的js代码
Feb 17 #Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 #Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 #Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 #Javascript
清除div下面的所有标签的方法
Feb 17 #Javascript
You might like
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vuex学习之Actions的用法详解
2017/08/29 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python连接Impala实现步骤解析
2020/08/04 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
实体的生命周期
2013/08/31 面试题
怒海潜将观后感
2015/06/11 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle