2.15 动态添加、删除下拉菜单选项

在实际的网站运营中很多数据都是动态变化的，比如一些下拉菜单的选项，此时就需要利用JavaScript来动态地添加或删除选项了。其实，所谓的动态添加或删除下拉菜单的选项，实际上就是动态地操作DOM对象。JavaScript提供了为下拉菜单执行添加选项和删除选项的API——add()方法和remove()方法。

关于【代码2-15】的说明：

● 第46～51行代码定义了一个下拉菜单，并初始化了几个选项；然后动态添加和删除选项的操作都是基于这个下拉菜单来操作的。

● 第55～56行代码定义了一个按钮控件，并定义了onclick单击事件方法（on_remove_opt_click()），用于执行删除选项的操作。第67～70行代码是事件方法（on_remove_opt_click()）的具体实现，第69行代码通过remove()方法删除指定的选项（selectedIndex）。

● 第36～37行代码定义了另一个按钮控件，并定义了onclick单击事件方法（on_add_opt_click()），用于执行添加选项的操作。第75～81行代码是事件方法（on_add_opt_click()）的具体实现，第78～79行代码获取了用户输入的选项信息（value值和text文本），第80行代码通过add()方法添加刚刚定义的选项。

下面使用FireFox浏览器运行测试该HTML网页，具体效果如图2.16和图2.17所示。

图2.16 JavaScript动态添加下拉菜单选项

图2.17 JavaScript动态删除下拉菜单选项