页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

一个级联菜单(IE ONLY),不过代码很精简!

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<html> 
<head> 
<title>无限级联下拉框</title> 
<style type="text/css"> 
 
</style> 
<script language="javascript" type="text/javascript"> 
<!-- 
var strArea = new Array();

strArea[0] = ['武汉','0','C'];//['标签','本身的ID','上级菜单编号'] 
strArea[1] = ['成都','1','C']; 
strArea[2] = ['北京','2','C']; 
strArea[3] = ['武昌区','3','0']; 
strArea[4] = ['洪山区','4','0']; 
strArea[5] = ['青山区','5','0']; 
strArea[6] = ['汉阳区','6','0']; 
strArea[7] = ['双流县','7','1']; 
strArea[8] = ['新津县','8','1']; 
strArea[9] = ['大邑县','9','1']; 
strArea[10] = ['都江堰','10','1']; 
strArea[11] = ['东城区','11','2']; 
strArea[12] = ['西城区','12','2']; 
strArea[13] = ['崇文区','13','2']; 
strArea[14] = ['朝阳区','14','2']; 
strArea[15] = ['宣武区','15','2']; 
strArea[16] = ['海淀区','16','2']; 
strArea[17] = ['东直门','17','11']; 
strArea[18] = ['北新桥','18','11']; 
strArea[19] = ['交道口','19','11'];

// 清空列表 
function ddl_Clear(ddl_name){ 
    var obj = document.getElementById(ddl_name); 
    for(var i = obj.options.length - 1;i >= 0;i--){ 
        obj.options[i] = null; 
    } 
}

// 选中匹配项 
function ddl_selected(ddl_name,match_val,isValue){ 
    var obj = document.getElementById(ddl_name); 
    for( var i = 0; i < obj.options.length; i++ ){ 
        var matchobj = obj.options[i].value; 
        if(!isValue){ 
            matchobj = obj.options[i].Text; 
        } 
        if(match_val == matchobj){ 
            obj.options[i].selected = "selected"; 
        } 
    } 
}

// 去掉所有空格 
function delspace(findstr){ 
    // 先去掉空格 
    var myfind = findstr; 
    // 因为这里的.replace 只替换当前找到的第一个。所以这里用循环 
    for(var i = 0; i < findstr.length; i++){ 
        var myfind = myfind.replace(" ",""); 
    } 
    return myfind; 
}

// 初始化第一个下拉列表内容 
function ddl_Bind(ddl_name,bindData,keyword){ 
    // 获得一类下拉列表对象 
    var obj = document.getElementById(ddl_name); 
     
    for( var i = 0;i < bindData.length; i++ ){ 
        if(bindData[i][2] == keyword){ 
              if(i == 0){ 
                  if(bindData[i][0] != ""){ 
                      obj.add(new Option(bindData[i][0],bindData[i][1])); 
                  } 
              } 
              else{ 
                  obj.add(new Option(bindData[i][0],bindData[i][1])); 
              } 
        }     
    } 
    var num = 2; 
    var subValue = obj.options[num].value; 
     
    ddl_selected(ddl_name, num, true) 
    ddl_changed('section', subValue, strArea); 
}

// 列表内容变化时，实现其子列表动态加载 
function ddl_changed(ddl_name,keywords,ddl_data){     
    // 获得一类下拉列表对象 
    var obj = document.getElementById(ddl_name); 
    // 添加下一级分类的计数器 
    var m = 0; 
     
    ddl_Clear(ddl_name); 
    // 先添加一个'标题' 
    // 添加下一级分类 
    for( var i = 0; i < ddl_data.length; i++ ){         
        if( ddl_data[i][2] == keywords ){ 
            obj.options[m] = ( new Option( ddl_data[i][0],ddl_data[i][1] ) ); 
            m = m + 1; 
        }         
    }   
    obj.fireEvent("onchange"); 
}

//--> 
</script> 
</head> 
<body onLoad="ddl_Bind('city',strArea,strArea[0][2]);"> 
<table width="360" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#E2E2E2"> 
   <tr> 
      <td width="120" align="center" valign="middle" bgcolor="#F8F8F8">城市： 
        <select id="city" name="city" onChange="ddl_changed('section',this.value,strArea)"> 
      </select></td> 
      <td width="120" align="center" valign="middle" bgcolor="#F8F8F8">地区： 
        <select id="section" name="section" onChange="ddl_changed('field',this.value,strArea)"> 
        </select>      </td> 
      <td width="120" align="center" valign="middle" bgcolor="#F8F8F8">片区： 
        <select id="field" name="field"> 
        </select>      </td> 
   </tr>     
</table> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]