跪求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級聯動已經出來過了，但是用戶忽然又改變了國家或省份，首先要把後面的所有下拉列表框全部刪除掉，然後在生成下級列表