<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>小灰</title>

 </head>

 <body>

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

 <select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select>

 </form>

 <script language="JavaScript">

 <!--

 function LianDong(arr, sel)

 {

  var me = this;

  this.$ = function(o)

  {

   return document.getElementByIdx(o);

  }

  this.sub = function (i, pid)

  {

   for (var j=i+1; j<sel.length; j++)

   {

    me.$(sel[j]).length = 0;

    me.$(sel[j]).options[0] = new Option("请选择", "");

   }

   for ( var j = 0; j < arr.length; j++)

   {

    if (arr[j][1] == pid)

    {

     me.$(sel[i+1]).options[me.$(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]);

    }

   }

  }

  this.init = function()

  {

   me.sub(-1,"root");

   for (var i=0; i<sel.length-1; i++)

   {

    me.$(sel[i]).onchange = function()

    {

     var i;

     for (i=0; me.$(sel[i])!=this; i++);

     me.sub(i, me.$(sel[i]).value);

    }

   }

  }

  this.init();

 }

 var array=new Array();

 array[0]=new Array("华南地区","root","华南地区");

 array[1]=new Array("华北地区","root","华北地区");

 array[2]=new Array("上海","华南地区","上海");

 array[3]=new Array("广东","华南地区","广东");

 array[4]=new Array("徐家汇","上海","徐家汇");

 array[5]=new Array("普托","上海","普托");

 array[6]=new Array("广州","广东","广州");

 array[7]=new Array("湛江","广东","湛江");

 array[8]=new Array("湛江1","湛江","湛江1");

 array[9]=new Array("湛江2","湛江","湛江2");

 array[10]=new Array("广州1","广州","广州1");

 array[11]=new Array("广州2","广州","广州2");

 var select = new Array("s1","s2","s3","s4");

 var liandong=new LianDong(array, select)

 //-->

 </script>

 </body>

 </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. python 下的数据结构与算法---3:python内建数据结构的方法及其时间复杂度

    目录 一:python内部数据类型分类 二:各数据结构 一:python内部数据类型分类 这里有个很重要的东西要先提醒注意一下:原子性数据类型和非原子性数据类型的区别 Python内部数据从某种形式上 ...

  2. PL/SQL Developer主界面窗口左边窗口默认设置

    中文版:在菜单 工具 -> 首选项 -> 用户界面 -> 选项 窗口中,将“自动保存桌面”勾选上就可以了. 截图如下: 英文版:在菜单 Tools -> Preferences ...

  3. 最近公共祖先：LCA及其用倍增实现 +POJ1986

    Q:为什么我在有些地方看到的是最小公共祖先? A:最小公共祖先是LCA(Least Common Ancestor)的英文直译,最小公共祖先与最近公共祖先只是叫法不同. Q:什么是最近公共祖先(LCA ...

  4. UC/OS操作系统 （转）

    1.和其他一些著名的嵌入式操作系统不同,uC/OS-II在单片机系统中的启动过程比较简单,不像有些操作系统那样,需要把内核编译成一个映像文件写入ROM中,上电复位后,再从ROM中把文件加载到RAM中去 ...

  5. cf D. Valera and Fools

    http://codeforces.com/contest/369/problem/D 标号最小的两个人会有四种状态:a活b活,a死b活,a活b死,a死b死:按照这四种状态dfs就可以求出最后的数量. ...

  6. LeetCode_Edit Distance

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  7. LeetCode_Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...

  8. Qt编程之对QGraphicsItem点击右键弹出菜单

    就是对这个contextMenuEvent 事件重新实现,在这个事件函数中创建菜单,大概就是这样. void MyItem::contextMenuEvent(QGraphicsSceneContex ...

  9. linux下的shell和脚本

    1.各种Unix shell linux下的shell基本是从unix环境中的shell发展而来,贴一下wiki:其中我们常用的,可归类为Bourne Shell(/usr/bin/sh或/bin/s ...

  10. 浅谈C++中指针和引用的区别者之间的区别和用法（转）

    指针和引用在C++中很常用,但是对于它们之间的区别很多初学者都不是太熟悉,下面来谈谈他们2者之间的区别和用法. 1.指针和引用的定义和性质区别: (1)指针:指针是一个变量,只不过这个变量存储的是一个 ...