<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>
<select name="secondLevel" onChange="fnSetSubItem_Combo(this,thirdLevel,arrThirdLevel)" style="width:150px;"></select>
<select name="thirdLevel"></select>
</BODY>
</HTML>
分享到:
相关推荐
三级联动下拉框实现,包含行政编码,身份证前5位,一个文件实现
基于layui开发的省市区三级联动下拉框:以layui前端UI框架及vue前端框架实现省市县(区)的三级联动。
javascript实现二级联动下拉框,多多支持:)
一款简单的基于vue实现的三级联动下拉框代码,适用于各种三级联动下拉菜单选择功能。
Ajax实现的三级联动下拉框
Ajax实现二级/三级联动下拉框---servlet版
三级联动下拉框, 也可以扩展为N级联动, 自动判别 label, value, 速度快,项目中肯定用得到
主要介绍了Android实现联动下拉框二级地市联动下拉框功能,本文给大家分享思路步骤,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
C#无刷新联动下拉框,实现无限级无刷新联动,获取数据部分请自行改成读取数据库的数据即可
实现效果: jQuery实现select省市区三级联动下拉框,通过选择省,市区的值随之变化,非常适用于企业网站或者商城网站,用户在注册的时候填写的信息。php中文网推荐下载!
javascript实现二级联动下拉框.docx
里面有四个文件,ajax++jsp二级联动下拉框,ajax实现无刷新查询,Ajax异步
纯JS实现地区选择三级联动下拉框
supplyInfo_add.jsp最简单,就是通过一级触发实现二级联动;supplyInfo_update.jsp稍微难了点,不仅仅是一级触发实现二级联动,还有它是将数据库中相应的省份城市提取出来,将原有增加的省份城市提取给用户,供用户修改;...
ajax 实现 (全国,省,是,区....) N级联 Demo js: <script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...
jQuery解析xml文件,实现省市县三级联动下拉框
联动下拉框 实现无刷新
最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')...
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
jquery实现的多级联动下拉框,由div标签加上span标签实现。