跪求js城市四级联动代码,js城市二级联动

本文目录一览：

• 1、求四级联动代码（ASP+JS）
• 2、javascript如何实现4级联动
• 3、根据数据库表格当中的数据怎么设置四级联动 js

求四级联动代码（ASP+JS）

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

html

head

titleJS联动下拉框/title

meta name=”GENERATOR” content=”Microsoft FrontPage 4.0″

meta name=”ProgId” content=”FrontPage.Editor.Document”

meta name=”Originator” content=”Microsoft Visual Studio .NET 7.1″

script language=”javascript”

/*

** ==================================================================================================

** 类名：CLASS_LIANDONG_YAO

** 功能：多级连动菜单

**

** 作者：YAODAYIZI

** ==================================================================================================

**/

function CLASS_LIANDONG_YAO(array)

{

//数组，联动的数据源

this.array=array;

this.indexName=”;

this.obj=”;

//设置子SELECT

// 参数：当前onchange的SELECT ID，要设置的SELECT ID

this.subSelectChange=function(selectName1,selectName2)

{

//try

//{

var obj1=document.all[selectName1];

var obj2=document.all[selectName2];

var objName=this.toString();

var me=this;

obj1.onchange=function()

{

me.optionChange(this.options[this.selectedIndex].value,obj2.id)

}

}

//设置第一个SELECT

// 参数：indexName指选中项,selectName指select的ID

this.firstSelectChange=function(indexName,selectName)

{

this.obj=document.all[selectName];

this.indexName=indexName;

this.optionChange(this.indexName,this.obj.id)

}

// indexName指选中项,selectName指select的ID

this.optionChange=function (indexName,selectName)

{

var obj1=document.all[selectName];

var me=this;

obj1.length=0;

obj1.options[0]=new Option(“请选择”,”);

for(var i=0;ithis.array.length;i++)

{

if(this.array[i][1]==indexName)

{

//alert(this.array[i][1]+” “+indexName);

obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);

}

}

}

}

/script

/head

body form name=”form1″ method=”post”

SELECT ID=”s1″ NAME=”s1″

OPTION selected/OPTION

/SELECT

SELECT ID=”s2″ NAME=”s2″

OPTION selected/OPTION

/SELECT

SELECT ID=”s3″ NAME=”s3″

OPTION selected/OPTION

/SELECT

br

brbr

SELECT ID=”x1″ NAME=”x1″

OPTION selected/OPTION

/SELECT

SELECT ID=”x2″ NAME=”x2″

OPTION selected/OPTION

/SELECT

SELECT ID=”x3″ NAME=”x3″

OPTION selected/OPTION

/SELECT

SELECT ID=”x4″ NAME=”x4″

OPTION selected/OPTION

/SELECT

SELECT ID=”x5″ NAME=”x5″

OPTION selected/OPTION

/SELECT

/form

/body

script language=”javascript”

//例子1————————————————————-

//数据源

var array=new Array();

array[0]=new Array(“华南地区”,”根目录”,”华南地区”); //数据格式 ID，父级ID，名称

array[1]=new Array(“华北地区”,”根目录”,”华北地区”);

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

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

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

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

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

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

//——————————————–

//这是调用代码

var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源

liandong.firstSelectChange(“根目录”,”s1″); //设置第一个选择框

liandong.subSelectChange(“s1″,”s2”); //设置子级选择框

liandong.subSelectChange(“s2″,”s3”);

//例子2————————————————————-

//数据源

var array2=new Array();//数据格式 ID，父级ID，名称

array2[0]=new Array(“测试测试”,”根目录”,”测试测试”);

array2[1]=new Array(“华北地区”,”根目录”,”华北地区”);

array2[2]=new Array(“上海”,”测试测试”,”上海”);

array2[3]=new Array(“广东”,”测试测试”,”广东”);

array2[4]=new Array(“徐家汇”,”上海”,”徐家汇”);

array2[5]=new Array(“普托”,”上海”,”普托”);

array2[6]=new Array(“广州”,”广东”,”广州”);

array2[7]=new Array(“湛江”,”广东”,”湛江”);

array2[8]=new Array(“不知道”,”湛江”,”不知道”);

array2[9]=new Array(“5555″,”湛江”,”555″);

array2[10]=new Array(“++++”,”不知道”,”++++”);

array2[11]=new Array(“111″,”徐家汇”,”111″);

array2[12]=new Array(“222″,”111″,”222”);

array2[13]=new Array(“333″,”222″,”333”);

//——————————————–

//这是调用代码

//设置数据源

var liandong2=new CLASS_LIANDONG_YAO(array2);

//设置第一个选择框

liandong2.firstSelectChange(“根目录”,”x1″);

//设置子选择框

liandong2.subSelectChange(“x1″,”x2”)

liandong2.subSelectChange(“x2″,”x3”)

liandong2.subSelectChange(“x3″,”x4”)

liandong2.subSelectChange(“x4″,”x5”)

/script

/html

a href=” “欢迎访问阿里西西网页特效代码站，js.alixixi.com/a

javascript如何实现4级联动

亲，你这个不连接到数据库查询的话，那只有把这些省市全部写死到页面的js的数组或者json对象中，其他的简单遍历里面的内容，然后动态创建dom节点添加到页面的父元素中就可以了

根据数据库表格当中的数据怎么设置四级联动 js

这个需要用到Ajax和jquery，因为用jquery比较简单，用原生的js代码，比较麻烦，说一下我的思路

比如 国-省-市-县

首先显示一个国家的下拉列表框，其他的不显示，然后当这个下拉列表框的值改变之后，也就是用户选择了其中一个国家，然后触发一个ajax，把代表这个国家的的id通过ajax传到后台，通过这个id在后台查询到所有的省份，然后传到前台，前台通过遍历所有的省份，组装一个html字符串，然后将这个字符串动态插入到代表国家的下拉列表框后面，生成 省 的下拉列表框，同理，当用户改变了省下拉框的值的时候再次触发另一个ajax，如此即可，

还有一点需要注意，如果4级联动已经出来过了，但是用户忽然又改变了国家或省份，首先要把后面的所有下拉列表框全部删除掉，然后在生成下级列表