当前位置:Gxlcms > JavaScript > javascriptDOM编程实例(智播客学习)_javascript技巧

javascriptDOM编程实例(智播客学习)_javascript技巧

时间:2021-07-01 10:21:17 帮助过:5人阅读

并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.
下面就几个我觉得比较好的例子和大家分享一下。
1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现)
步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分。
代码如下:

<BR><select id="province" onchange="selCity()"> <BR><option >--选择省份--</option> <BR><option >北京</option> <BR><option >天津</option> <BR><option >湖北</option> <BR><option >山东</option> <BR><option >河北</option> <BR></select> <BR><select id="city"> <BR><option>--选择城市--</option> <BR></select> <BR>

2)页面修饰不需要太多,只要让下拉菜单显示一个就好了
3)通过JavaScript来实现功能,我们要想在第一个下拉列表中选择省份,后面能直接显示他的城市,看到这种一对多对应关系,首先想到map集合这个容器,可是JavaScrip没有map集合,那我们就想到了数组这样一个容器,最后决定用二维数组来帮我我们实现这个功能。
代码如下: