1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.  <title>小灰</title>
  6.  </head>
  7.  <body>
  8.  <form name="form1" method="post">
  9.  <select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select>
  10.  </form>
  11.  <script language="JavaScript">
  12.  <!--
  13.  function LianDong(arr, sel)
  14.  {
  15.   var me = this;
  16.   this.$ = function(o)
  17.   {
  18.    return document.getElementByIdx(o);
  19.   }
  20.   this.sub = function (i, pid)
  21.   {
  22.    for (var j=i+1; j<sel.length; j++)
  23.    {
  24.     me.$(sel[j]).length = 0;
  25.     me.$(sel[j]).options[0] = new Option("请选择", "");
  26.    }
  27.    for ( var j = 0; j < arr.length; j++)
  28.    {
  29.     if (arr[j][1] == pid)
  30.     {
  31.      me.$(sel[i+1]).options[me.$(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]);
  32.     }
  33.    }
  34.   }
  35.   this.init = function()
  36.   {
  37.    me.sub(-1,"root");
  38.    for (var i=0; i<sel.length-1; i++)
  39.    {
  40.     me.$(sel[i]).onchange = function()
  41.     {
  42.      var i;
  43.      for (i=0; me.$(sel[i])!=this; i++);
  44.      me.sub(i, me.$(sel[i]).value);
  45.     }
  46.    }
  47.   }
  48.   this.init();
  49.  }
  50.  var array=new Array();
  51.  array[0]=new Array("华南地区","root","华南地区");
  52.  array[1]=new Array("华北地区","root","华北地区");
  53.  array[2]=new Array("上海","华南地区","上海");
  54.  array[3]=new Array("广东","华南地区","广东");
  55.  array[4]=new Array("徐家汇","上海","徐家汇");
  56.  array[5]=new Array("普托","上海","普托");
  57.  array[6]=new Array("广州","广东","广州");
  58.  array[7]=new Array("湛江","广东","湛江");
  59.  array[8]=new Array("湛江1","湛江","湛江1");
  60.  array[9]=new Array("湛江2","湛江","湛江2");
  61.  array[10]=new Array("广州1","广州","广州1");
  62.  array[11]=new Array("广州2","广州","广州2");
  63.  var select = new Array("s1","s2","s3","s4");
  64.  var liandong=new LianDong(array, select)
  65.  //-->
  66.  </script>
  67.  </body>
  68.  </html>

简单JS多级下拉框无刷新的更多相关文章

  1. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  2. jQuery Ajax实现下拉框无刷新联动

    HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); stri ...

  3. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  4. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  5. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  6. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  7. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  8. JS实现下拉框选中不同的项，对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

  9. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

随机推荐

  1. 添加序号列（SQL Server）

    SELECT ROW_NUMBER() OVER (ORDER BY 实际缴费金额 ) AS A, --序号 RANK() OVER (ORDER BY 实际缴费金额 ) AS B, --相同跳过从新 ...

  2. cell高度自动适应文章内容

    效果: 描述:表视图中生成多个不同的cell,cell的高度跟文字内容的多少有关 要求:需要自己在网上下载一个plis文件,然后修改两个标题 一 : 创建工程文件UIAutomaticCellHeig ...

  3. 1 Linux平台下快速搭建FTP服务器 win7下如何建立ftp服务器

    百度经验连接(亲测可用) http://jingyan.baidu.com/article/380abd0a77ae041d90192cf4.html win7下如何建立ftp服务器 http://j ...

  4. PHP echo, print, printf, sprintf函数的区别和使用

    1. echo函数: 输出函数,是命令,不能返回值.echo后面可以跟很多个参数,之间用分号隔开,如: echo $myvar1; echo 1,2,$myvar,"<b>bol ...

  5. C#编码标准－－编码习惯

    C#编码标准--编码习惯 0.  书写程序时的大小写规则: a) 类:PascalCase表示法.如 MyClass b) 枚举值:PascalCase表示法.如 Colors.Red c) 枚举类型 ...

  6. 让IE支持CSS3圆角的方法

    如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果, ...

  7. 类和对象：给大家介绍对象 - 零基础入门学习Python036

    类和对象:给大家介绍对象 让编程改变世界 Change the world by program 我们之前说过Python无处不对象,Python到处都是对象,然后你会发现很多童鞋其实并不知道对象是什 ...

  8. Swift—计算属性-备

    计算属性本身不存储数据,而是从其他存储属性中计算得到数据. 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可选的setter(设置访问器)来间接设置其他属性或变量的值. ...

  9. Codeforces 527D Clique Problem

    http://codeforces.com/problemset/problem/527/D 题意:给出一些点的xi和wi,当|xi−xj|≥wi+wj的时候,两点间存在一条边,找出一个最大的集合,集 ...

  10. C51的模块化设计方法

    一个大的单片机程序往往包含很多模块,我是这样组织的: 1.每一个C源文件都要建立一个与之名字一样的H文件(头文件),里面仅仅包括该C文件的函数的声明,其他的什么也不会有,比如变量的定义啊等等不应该有. ...