任务2-11　可编辑下拉列表框的制作

需求：

下拉列表框提供文本可选项，同时也能由用户输入可选项之外的文本。

分析：

添加文本框和下拉列表两个标签，使用两个绝对定位的DIV作为它们的容器，调整DIV位置及文本框和下拉列表大小，使两者编辑区完全重叠，在下拉列表标签的选项改变时，将选项值写入文本框标签中，从而实现下拉列表框的可编辑功能。

实现：

第一步，新建文件夹11，添加一个页面。

第二步，在页面中添加两个作为容器的DIV，并设置其相应属性，代码如清单2-32所示。

清单2-32　两个重叠的容器

第三步，在第一个容器中添加下拉列表标签，使其作为下层标签，并设置其相关属性，代码如清单2-33所示。

清单2-33　下拉列表标签设置

第四步，在第二个容器中添加文本框标签，使其作为上层标签（默认为后来者居上），并设置其相关属性，代码如清单2-34所示。

清单2-34　文本框标签设置

第五步，为及时将下拉列表标签选取值送到文本框标签中，在下拉列表标签中设置事件属性onchange为“document.getElementById（'Text1'）.value=this.value；”。

第六步，添加命令按钮标签以读取Text1中的值，属性设置见清单2-35，代码设置如清单2-36所示。

清单2-35　命令按钮标签设置

清单2-36　命令按钮标签单击事件处理函数

说明

下拉列表右侧的小按钮宽度为22px，所以下拉列表标签宽度要比文本框标签宽22px。

运行后发现文本框标签偏下1px，所以将文本框标签容器的top属性改为-1px，以实现两个标签的完全重叠，另外文本框的右边框应去除（border-right：none）。

如果文本框标签id是唯一的，则可以简写下拉列表标签onchange的属性，其代码为onchange="Text1.value=this.value"。

本任务中不可用DIV定位其他标签，可以直接设置文本框标签和下拉列表标签的定位方式（position）为绝对定位（absolute），然后再设置位置大小等属性。