JavaScript网页编程实例：列表框联动

两个列表框经常有某种内在的联系。如部门列表框和员工列表框，当浏览者在部门列表框中选定某个部门时，员工列表框的选项仅有此部门所包含的员工。商品大类列表框和商品子类列表框之间也有类似的联系。多个列表框之间的这种联系及按照这种联系实现它们之间的互动，称为列表框联动。

如图7.20所示的省份和地市列表框的联动展示了这一场景。

图7.20　省份和地市列表框的联动

在省份列表框中选择“湖南”时，地市列表框中仅显示湖南省所辖的地市。

例7.11：

运行页面，界面如图7.21所示。

图7.21　运行界面

此时，第二个列表框（地市）中不包含任何地市的选项。

在第一个列表框中选择“北京”，结果如图7.22所示。

图7.22　省份选择北京

在第一个列表框中选择“上海”，结果如图7.23所示。

图7.23　省份选择上海

在第一个列表框中选择“请选择”，结果如图7.24所示。

图7.24　在第一个列表框中选择“请选择”

cityList是一个交错数组，又称锯齿数组，也就是数组的数组。它一共有4个元素，每个元素又是另一个子数组。每个子数组表示一个省份所包含的地市的信息。注意：各个子数组的0号元素时表示省份本身的名称，此省份包含的地市名称是从1号元素开始的。

浏览器加载此页面完成时，引发window对象的onload事件，此时fillProvince函数被调用，它遍历了cityList数组，并把cityList数组的4个元素表示的4个子数组的0号元素的值构造成为Option选项对象，添加到第一个（省市自治区）列表框对象的options集合中。

当用户在第一个（省份）列表框中选择特定省份时，将在此列表框对象上引发onchange事件，此时fillCity函数被调用，它首先清除了第二个（地市）列表框中的地市选项，接着遍历了cityList数组，直到找到表示当前省份的子数组，并将子数组中除了0号元素之外的其他元素构造成为Option对象，添加到第二个（地市）列表框对象的options集合中。

➢事件驱动是在实现界面编程时常采用的编程机制，简单地说就是：事件的引发导致事件处理程序执行。

➢用户事件是指浏览者通过鼠标或键盘操作界面元素引发的事件。

➢系统事件是指浏览器对象和网页元素对象的状态发生变化而引发的事件。

➢事件与事件处理程序的关联方式有3种：①在<script></script>脚本块中为对象的事件属性赋值；②使用attachEvent（）方法或addEventListener（）方法绑定；③在标签中为事件属性赋值。

➢事件对象提供与每一次事件相关的信息。如事件的类型、返回值、光标的位置、哪个键引发等。

1.在浏览网页中的表格时，有时会忘记浏览到的位置。这时可使用鼠标选中已经读取到的数据并改变表格中的背景颜色，从而记录数据读取的位置，便于继续浏览。其运行结果如图7.25所示。

图7.25　选中表格中的单元格改变背景颜色(https://www.xing528.com)

在JavaScript中使用元素对象的style.backgroundColor属性设置背景颜色。

例如：设置id为obj的元素的背景颜色为白色，代码如下：

2.编写一个网页，实现鼠标移上文本框颜色发生变化效果。文本框得到焦点时背景颜色为“#D4D0C8”，边框为红色；文本框失去焦点时背景颜色为“#fff”，边框为蓝色；当鼠标移上按钮时，按钮背景图片发生改变，效果如图7.26所示。

图7.26　事件的使用

3.在一个网页中，实现省市级联功能。当选择省份时，动态显示该省份下的所有城市。效果如图7.27和图7.28所示。

图7.27　选择省份

图7.28　根据省份显示城市

4.使用JavaScript编写一个用于验证用户登录的功能，效果如图7.29所示。当用户名失去焦点，判断用户名是否输入，如图7.30所示；如果用户名输入正确，如图7.31所示。

图7.29　用户登录页面

图7.30　输入错误

图7.31　输入正确

5.使用JavaScript编写一个用于验证用户注册的功能，效果如图7.32所示。要求：Email格式必须正确，用户名不能为空且必须以字母开头，密码至少4位且区分大小写。如果用户输入不满足要求时，就给出相应的提示信息。

图7.32　实现会员注册验证功能

1.使用JavaScript+CSS制作可折叠的菜单。当用户点击一级菜单时，显示或隐藏下面的子菜单，如图7.33所示。

图7.33　可折叠菜单

主要使用鼠标的单击事件，使用显示声明的函数处理单击事件，在函数中通过改变元素的样式，以达到折叠和展开菜单的效果，其元素间嵌套关系如图7.34所示。

图7.34　菜单元素间嵌套关系图

2.我们使用CSS+DIV创建了一个模拟窗口，下面我们实现对该窗口的拖动，并且可以对该窗体执行关闭操作，运行效果如图7.35所示。

图7.35　拖动窗口的效果

当鼠标按住要拖动的层时，将层的名称赋给一个变量，并用该变量对层进行移动操作。通过event对象中的x和y属性，拖动鼠标改变层的坐标位置，最终实现层的拖动。