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

现在的位置: 首页 > 综合 > 正文

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

2013年04月11日 ⁄ 综合 ⁄ 共 16字 ⁄ 字号小中大 ⁄ 评论关闭

<br />
<style type="text/css"> 
 
</style>
<p><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><br />
<table width="360" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#E2E2E2">
<tr>
<td width="120" align="center" valign="middle" bgcolor="#F8F8F8">城市： </p>
<select id="city" name="city" onchange="ddl_changed('section',this.value,strArea)"></select>
</td>
<td width="120" align="center" valign="middle" bgcolor="#F8F8F8">地区： </p>
<select id="section" name="section" onchange="ddl_changed('field',this.value,strArea)"></select>
</td>
<td width="120" align="center" valign="middle" bgcolor="#F8F8F8">片区： </p>
<select id="field" name="field"></select>
</td>
</tr>
</table>
<p>

【上篇】T-SQL(1)-变量
【下篇】Webkit是如何加载网页的

作者: raster

该日志由 raster 于11年前发表在综合分类下，最后更新于 2013年04月11日.
转载请注明: 一个级联菜单(IE ONLY),不过代码很精简! | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: raster

书签

最新文章New

本站推荐

返回首页