简单的二级联动菜单

JS动态加载下拉菜单示例
本文介绍了一个使用JavaScript动态生成下拉菜单的示例,展示了如何根据预定义的数据结构来更新页面上的选择框选项。此方法适用于需要根据不同条件显示不同子项的场景。
[code]
<script  language="JavaScript">

 

var  subcat  =  new  Array();
subcat[0]  =  new  Array('1','苏州','苏州')
subcat[1]  =  new  Array('1','张家港','张家港')
subcat[2]  =  new  Array('1','常熟','常熟')
subcat[3]  =  new  Array('1','太仓','太仓')
subcat[4]  =  new  Array('1','昆山','昆山')
subcat[5]  =  new  Array('1','吴江','吴江')
subcat[6]  =  new  Array('2','扬州','扬州')
subcat[7]  =  new  Array('2','镇江','镇江')
subcat[8]  =  new  Array('2','南京','南京')
subcat[9]  =  new  Array('2','南通','南通')
subcat[10]  =  new  Array('2','常州','常州')
subcat[11]  =  new  Array('2','无锡','无锡')
subcat[12]  =  new  Array('2','芜湖','芜湖')
subcat[13]  =  new  Array('2','上海','上海')
subcat[14]  =  new  Array('2','湖州','湖州')
subcat[15]  =  new  Array('2','嘉兴','嘉兴')
subcat[16]  =  new  Array('2','杭州','杭州')
subcat[17]  =  new  Array('2','黄山','黄山')
subcat[18]  =  new  Array('2','绍兴','绍兴')
subcat[19]  =  new  Array('2','宁波','宁波')
//subcat[20]  =  new  Array('2','宁波','宁波')
subcat[20]  =  new  Array('3','北京','北京')
subcat[21]  =  new  Array('3','重庆','重庆')
subcat[22]  =  new  Array('3','石家庄','石家庄')
subcat[23]  =  new  Array('3','沈阳','沈阳')
subcat[24]  =  new  Array('3','长春','长春')
subcat[25]  =  new  Array('3','哈尔滨','哈尔滨')
subcat[26]  =  new  Array('3','西安','西安')
subcat[27]  =  new  Array('3','兰州','兰州')
subcat[28]  =  new  Array('3','银川','银川')
subcat[29]  =  new  Array('3','济南','济南')
subcat[30]  =  new  Array('3','南京','南京')
subcat[31]  =  new  Array('3','杭州','杭州')
subcat[32]  =  new  Array('3','合肥','合肥')
subcat[33]  =  new  Array('3','南昌','南昌')
subcat[34]  =  new  Array('3','福州','福州')
subcat[35]  =  new  Array('3','郑州','郑州')
subcat[36]  =  new  Array('3','武汉','武汉')
subcat[37]  =  new  Array('3','长沙','长沙')
subcat[38]  =  new  Array('3','广州','广州')
subcat[39]  =  new  Array('3','南宁','南宁')
subcat[40]  =  new  Array('3','贵阳','贵阳')
subcat[41]  =  new  Array('3','成都','成都')
subcat[42]  =  new  Array('3','昆明','昆明')
subcat[43]  =  new  Array('3','拉萨','拉萨')


function  changeselect1(locationid)
{
                document.myform.site2.length  =  0;                                                            //初始化下拉列表  清空下拉数据
                document.myform.site2.options[0]  =  new  Option('==请选择==','');  //给第一个值
                for  (i=0;  i<subcat.length;  i++)                                                        //legth=20
                {
                                if  (subcat[i][0]  ==  locationid)                                        //[0]  [1]  第一列  第二列 
                                {document.myform.site2.options[document.myform.site2.length]  =  new  Option(subcat[i][1],  subcat[i][2]);}                                                                        //建立option
        //第一次  length=1  因为有==请选择==
        //i=9时  length=  10  值有11个  因为从0数起  subcat[i][0]  ==  locationid屏蔽了再写
                }
}

</script>

<select  name="s1"  onChange="changeselect1(this.value)">
                                <option  selected>===请选择词条类别===</option>

    <option    value="  1"  selected>===苏州===</option>
<option    value="  1"  selected>周边</option>
<option    value="  1"  selected>江苏</option>
<option    value="  1"  selected>全国</option>
                                                                          </select>

<SELECT 
                                    name="s2"  size="1"      >
                            </SELECT>
[/code]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值