`
吃猫的鱼
  • 浏览: 45747 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

联动下拉框的实现

 
阅读更多
<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>
分享到:
评论

相关推荐

    三级联动下拉框实现

    综上所述,"三级联动下拉框实现"涉及前端开发中的交互设计、DOM操作、事件处理和数据管理等多个方面,是网页开发中不可或缺的一种技术。通过`test.html`文件,我们可以深入理解这一技术的具体实现细节,并学习如何在...

    asp二级联动下拉框,三级联动下拉框

    在ASP中,二级联动和三级联动下拉框是常见的功能,通常用于实现数据的筛选和过滤,例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...

    基于layui开发的省市区三级联动下拉框.zip

    本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例,它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先,我们来了解一下layui。layui是一款中国本土的开源前端框架,它提供了...

    layui-省市县三级联动下拉框-HTML源码

    在IT行业中,网页开发经常会遇到需要实现省市区县等多级联动下拉框的需求,这在用户填写地址、选择服务区域等场景十分常见。本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现...

    mvc3二级联动下拉框

    首先,我们来看“Mvc3DropDownList”这个文件名,这可能是包含实现二级联动下拉框所需代码的项目或类库。在这个项目中,可能包含了控制器(Controllers)、视图(Views)以及模型(Models)三个主要部分,这些都是...

    js三级联动下拉框

    ### JS三级联动下拉框知识点解析 #### 一、知识点概览 在Web开发中,三级联动下拉框是一种常见的用户交互方式,主要用于提供多级数据选择的功能,比如省份、城市、区县的选择等场景。该功能通过JavaScript实现,...

    简单的vue三级联动下拉框代码

    总结,"简单的vue三级联动下拉框代码"是一个实际项目中常见的需求,通过Vue.js的数据绑定、组件化以及计算属性等特性,可以方便地实现这种功能,提高开发效率。理解并掌握这些知识点对于提升Vue.js开发能力大有裨益...

    四级联动下拉框

    - Vue.js/React.js/Angular.js:现代Web开发中,这些前端框架提供了更高效的数据绑定和组件化功能,可以方便地实现联动下拉框。 4. **数据结构**: - 数据通常以JSON格式存储,每个下拉框的选项是嵌套的,比如省-...

    javascript实现二级联动下拉框.docx

    JavaScript 实现二级联动下拉框 本文将详细介绍如何使用 JavaScript 实现二级联动下拉框,包括标题、描述、标签、部分内容等信息。 标题:JavaScript 实现二级联动下拉框 描述:JavaScript 实现二级联动下拉框是...

    AJAX版省市区三级联动下拉框

    在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...

    javascript实现二级联动下拉框

    为了让下拉框实现联动,需要在省份下拉框上添加一个事件监听器,当用户选择省份时触发相应的函数来更新城市下拉框的内容。 ```javascript sltProvince.addEventListener('change', getCity); // 监听省份下拉框的...

    js2级省市联动下拉框

    在网页开发中,"js2级省市联动下拉框"是一种常见的交互设计,它用于创建一个用户友好的界面,让用户能够方便地选择省份和城市。这个功能通常在填写地址、设置配送区域等场景中出现。下面我们将详细探讨如何实现这样...

    Android实现联动下拉框二级地市联动下拉框功能

    以上代码展示了基本的联动下拉框实现过程。实际开发中,你可能还需要考虑更多细节,如错误处理、数据动态加载、UI优化等。同时,对于更复杂的应用场景,可能需要使用更强大的适配器,如`BaseAdapter`或`...

    jquery动态创建联动下拉框

    本主题将深入探讨如何使用jQuery动态创建联动下拉框,这是一个常见的需求,特别是在构建多级选择或依赖性选择菜单时。 联动下拉框通常指的是两个或多个下拉框之间存在关联关系,当用户在一个下拉框中选择一个选项时...

    这里是基于layui开发的省市区三级联动下拉框.zip

    本项目是基于layui框架实现的省市区三级联动下拉框,这是一个常见的前端表单元素,常用于地址选择或定位功能。layui是一款轻量级的前端组件库,它提供了丰富的UI组件,易于使用且性能优异,特别适合快速构建中大型...

    Ajax实现三级联动下拉框

    ### Ajax实现三级联动下拉框的关键技术点与实践 在现代Web开发中,动态加载数据并更新页面元素的能力是提升用户体验的重要手段之一。三级联动下拉框作为一个常见的交互设计,常用于显示具有层级关系的数据,如省份...

    三级联动 下拉框

    在网页设计和开发中,"三级联动下拉框"是一种常见的交互元素,它通常用于实现多级关联选择,比如省份-城市-区县的选择。这种功能可以极大地提高用户体验,尤其是在处理大量分类信息时。下面我们将深入探讨这个话题,...

    php 三级联动下拉框

    总的来说,实现PHP的三级联动下拉框涉及到数据库设计、PHP连接数据库、动态数据获取、前端交互以及样式美化等多个环节。通过合理的设计和编程,我们可以创建出既实用又美观的三级联动下拉框,提高用户体验。

    JS实现三级联动下拉框

    下面我们将详细探讨如何使用JavaScript实现三级联动下拉框。 首先,我们需要准备HTML结构。每个下拉框(`&lt;select&gt;`)都需要一个唯一的ID,以便于JavaScript获取和操作它们。例如: ```html &lt;select id="province"&gt;...

    无限级下联动下拉框

    总结来说,AdSelect是Asp.Net 2.0平台下实现无限级下联动下拉框的强大工具,它的部署简单,使用灵活,能有效地提升用户体验并简化开发者的工作。无论是新手还是经验丰富的开发者,都可以快速上手并将其应用到实际...

Global site tag (gtag.js) - Google Analytics