联动下拉框的实现

吃猫的鱼

浏览: 45504 次
性别:
来自: 长沙

最近访客更多访客>>

wzj19890310

jacket233

GOD_yamade

syboy007

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="Javascript">
/**//*****************************************************************************/
//联动下拉框的实现
//fnSetSubItem_Combo的参数分别为：
//objCombo：父项ID
//objSubCombo：子项ID
//arrSubItems：子项数组
//strDefValu：子项默认选项的value值
/**//*****************************************************************************/
function fnSetSubItem_Combo(objCombo,objSubCombo,arrSubItems,strDefValue){
var i;
var bFound;

fnClearCombo(objSubCombo);

bFound=false;
for(i=0;i<arrSubItems.length;i++){
if(arrSubItems[i][1] + "" == objCombo.value + ""){
var oOption = document.createElement("OPTION");
objSubCombo.options.add(oOption);
oOption.text = arrSubItems[i][2];
oOption.value = arrSubItems[i][0];
if(strDefValue + "" == oOption.value + ""){
oOption.selected=true;
}
bFound=true;
}
}

if(!bFound && objSubCombo.options.length == 0)
objSubCombo.disabled=true;
else
objSubCombo.disabled=false;
//alert(objSubCombo.onchange());

if(objSubCombo.onchange)
objSubCombo.onchange();
}

function fnClearCombo(objCombo){
var i,intLen;
//objCombo.selectedIndex=-1;
if(objCombo.Proced ==1){
intLen=objCombo.options.length;
for(i=0;i<intLen-objCombo.FirstIdx;i++){
objCombo.options[objCombo.FirstIdx]=null;
//objCombo.options.remove(0);
}
}
else{
objCombo.FirstIdx=objCombo.options.length;
objCombo.Proced =1;
}
}

function fnSetCityProv(objParObj,objSubObj,arrCPC){
objSubObj.options.length=0;
//取得当前选中的ID,递归取得所有子ID
for(i=0;i<arrCPC.length;i++){
if(arrCPC[i][0] == objParObj.value){
objSubObj.options[objSubObj.options.length]=new Option(arrCPC[i][2],arrCPC[i][0]);
}
}

fnGetCPCSubItems(objParObj,objSubObj,arrCPC,objParObj.value,0);
}

//先根
function fnGetCPCSubItems(objParObj,objSubObj,arrCPC,intParID,intLV){
var i;
var strCaption;

for(i=0;i<arrCPC.length;i++){
if(arrCPC[i][1] == intParID){
switch(intLV){
case 0:strCaption=" --" + arrCPC[i][2];break;
case 1:strCaption=" --" +arrCPC[i][2];break;
}

objSubObj.options[objSubObj.options.length]=new Option(strCaption,arrCPC[i][0]);
if(intLV <= 1)
fnGetCPCSubItems(objParObj,objSubObj,arrCPC,arrCPC[i][0],intLV+1)
}
}
}
</script>

<script language="Javascript">
//生成数组函数
function fnCreateArray(intHeight,intWidth){
var i,arrRet;
arrRet=new Array(intHeight);//生成数组的第一维

for(i=0;i<intHeight;i++){
arrRet[i] = new Array(intWidth);//生成数组的第二维
}
return arrRet;//返回生成的数组
}

//生成数组并赋值
/**//****第二层数组：Array-SecondLevel（数组）******/
var arrSecondLevel;
arrSecondLevel=fnCreateArray(9,3);
arrSecondLevel[0][0]="0101";//value
arrSecondLevel[0][1]="01";//父项value
arrSecondLevel[0][2]="彩电";//text
arrSecondLevel[1][0]="0102";
arrSecondLevel[1][1]="01";
arrSecondLevel[1][2]="冰箱";
arrSecondLevel[2][0]="0103";
arrSecondLevel[2][1]="01";
arrSecondLevel[2][2]="音响";

arrSecondLevel[3][0]="0201";
arrSecondLevel[3][1]="02";
arrSecondLevel[3][2]="内存";
arrSecondLevel[4][0]="0202";
arrSecondLevel[4][1]="02";
arrSecondLevel[4][2]="处理器";
arrSecondLevel[5][0]="0203";
arrSecondLevel[5][1]="02";
arrSecondLevel[5][2]="显示器";
arrSecondLevel[6][0]="0204";
arrSecondLevel[6][1]="02";
arrSecondLevel[6][2]="鼠标";

arrSecondLevel[7][0]="0301";
arrSecondLevel[7][1]="03";
arrSecondLevel[7][2]="书柜";
arrSecondLevel[8][0]="0302";
arrSecondLevel[8][1]="03";
arrSecondLevel[8][2]="椅子";

/**//****第三层数组：Array-ThirdLevel（数组）******/
var arrThirdLevel;
arrThirdLevel=fnCreateArray(13,3);
arrThirdLevel[0][0]="010101";//value
arrThirdLevel[0][1]="0101";//父项value
arrThirdLevel[0][2]="长虹";//text
arrThirdLevel[1][0]="010102";
arrThirdLevel[1][1]="0101";
arrThirdLevel[1][2]="TCL";
arrThirdLevel[2][0]="010103";
arrThirdLevel[2][1]="0101";
arrThirdLevel[2][2]="创维";

arrThirdLevel[3][0]="010201";
arrThirdLevel[3][1]="0102";
arrThirdLevel[3][2]="容星";
arrThirdLevel[4][0]="010202";
arrThirdLevel[4][1]="0102";
arrThirdLevel[4][2]="海尔";

arrThirdLevel[5][0]="010301";
arrThirdLevel[5][1]="0103";
arrThirdLevel[5][2]="创新";
arrThirdLevel[6][0]="010302";
arrThirdLevel[6][1]="0103";
arrThirdLevel[6][2]="牙兰";

arrThirdLevel[7][0]="020101";
arrThirdLevel[7][1]="0201";
arrThirdLevel[7][2]="金士顿";
arrThirdLevel[8][0]="020102";
arrThirdLevel[8][1]="0201";
arrThirdLevel[8][2]="黑金刚";

arrThirdLevel[9][0]="020201";
arrThirdLevel[9][1]="0202";
arrThirdLevel[9][2]="Intel";
arrThirdLevel[10][0]="020202";
arrThirdLevel[10][1]="0202";
arrThirdLevel[10][2]="AMD";

arrThirdLevel[11][0]="020301";
arrThirdLevel[11][1]="0203";
arrThirdLevel[11][2]="三星";
arrThirdLevel[12][0]="020302";
arrThirdLevel[12][1]="0203";
arrThirdLevel[12][2]="索尼";

/**//**************初始化联动下拉框*****************/
function fnStart(){
fnSetSubItem_Combo(document.form1.firstLevel,document.form1.secondLevel,arrSecondLevel,"0101");//第二层
fnSetSubItem_Combo(document.form1.secondLevel,document.form1.thirdLevel,arrThirdLevel,"010101");//第三层
//参数依次为：父项，子项，子项数组，子项默认值
/**//*--三级联动初始化，分两次调用--*/
}
window.onload=fnStart;//页面载入时调用联动下拉框初始化函数
//-->
</script>
</HEAD>

<BODY>
<form name="form1" style="font-size:12px;">
商品：
<select name="firstLevel" onChange="fnSetSubItem_Combo(this,secondLevel,arrSecondLevel)">
<option value="01" selected>家电</option>
<option value="02">电脑配件</option>
<option value="03">家居</option>
</select>&nbsp;
<select name="secondLevel" onChange="fnSetSubItem_Combo(this,thirdLevel,arrThirdLevel)" style="width:150px;"></select>
<select name="thirdLevel"></select>
</BODY>
</HTML>

分享到：