html标签深入学习

今天做项目过程中遇到了将下拉列表选择的值提交到服务器端保存，并在修改时取得对应的下拉列表的选择值问题。

如下：

<select name="flag"  οnchange="this.options[this.selectedIndex].innerText);">
                                                            <option value="1" <%if(flag.equals("1")){%>
                                                            selected
                                                            <% } %>>商品1</option>
                                                            <option value="2" <%if(flag.equals("2")){%>
                                                            selected
                                                            <% } %>>商品2</option>

在修改页面中通过判断，然后用selected属性来取得以选项的值。

 

现在将<select>标签总结如下：

select元素可以创建选择菜单和下拉列表 。

属性如下： disabled，multiple，name，size

                 size 属性规定下拉列表中可见选项的数目

                 name 属性用于对提交的表单数据进行标识

事件属性： onfocus，onblur，onchange

 

option元素定义下拉列表中的一个选项。

属性如下： disabled，selected，value

                selected 属性规定在页面加载时预先选定该选项（ 被预选的选项会显示在下拉列表最前面的位置 ）。

                value 属性中的值是表单提交时发送到服务器的值（text值不提交）

事件属性：onclick，onmouseover，onmouseout等

 

用事件属性获取下拉列表框中option元素中的value属性值和文本值，

如下例1：

<!-- 获取文本值 -->
<select name="animal" οnchange="this.options[this.selectedIndex].text;">
<option value="dog">狗</option>
<option value="cat">猫</option>
</select>

<!-- 获取value值 -->
<select name="animal" οnchange="this.options[this.selectedIndex].value;">
<option value="pig">猪</option>
<option value="chicken">鸡</option>
</select>

 

另外可以使用css的style属性（几乎所有的HTML Tag都可以使用style属性）控制下拉列表的宽度，

如下：style="width:50px"