SpringMVC表单标签（6）

1.10 option标签

option标签会被渲染为一个普通的HTML option标签。当一个SpringMVC select标签没有通过items属性指定自己的数据源的时候，我们就可以在select标签中通过普通HTML
option标签或者SpringMVC option标签来指定可以选择的项。

Jsp代码 

<form:form action="formTag/form.do" method="post" commandName="user">
<table>
<tr>
<td>最喜欢的运动:</td>
<td>
<form:select path="favoriteBall">
<option>请选择</option>
<form:option value="1">篮球</form:option>
<option value="4">羽毛球</option>
</form:select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"/></td>
</tr>
</table>
</form:form>
<form:form action="formTag/form.do" method="post" commandName="user">

    <table>

        <tr>

            <td>最喜欢的运动:</td>

            <td>

               <form:select path="favoriteBall">

                   <option>请选择</option>

                   <form:option value="1">篮球</form:option>

                   <option value="4">羽毛球</option>

               </form:select>

            </td>

        </tr>

       <tr>

            <td colspan="2"><input type="submit" value="提交"/></td>

        </tr>

    </table>

</form:form>

我们可以看到在上面代码中我们是没有指定select标签的数据源的，而是通过在select标签体里面指定普通HTML option标签和SpringMVC option标签来指定可选项。其渲染的效果如下：



这个时候你可能会有两个疑问：

l 如果我在使用select标签的时候通过items属性指定了其数据源，同时又在其标签体里面使用了option标签，那么这个时候会渲染出什么样的效果呢？是两种形式有一个优先级呢，还是会两种共存呢？

l 从上面代码产生的效果来看SpringMVC option标签跟普通的HTML option标签的效果无异，那为什么还要引进一个SpringMVC
option标签呢？

先来解释第一个问题，我们把上面的视图代码改为如下形式：

Jsp代码 

<form:form action="formTag/form.do" method="post" commandName="user">
<table>
<tr>
<td>最喜欢的运动:</td>
<td>
<form:select path="favoriteBall" items="${ballMap}">
<option>请选择</option>
<form:option value="1">篮球</form:option>
<option value="4">羽毛球</option>
</form:select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"/></td>
</tr>
</table>
</form:form>
<form:form action="formTag/form.do" method="post" commandName="user">

    <table>

        <tr>

            <td>最喜欢的运动:</td>

            <td>

               <form:select path="favoriteBall" items="${ballMap}">

                   <option>请选择</option>

                   <form:option value="1">篮球</form:option>

                   <option value="4">羽毛球</option>

               </form:select>

            </td>

        </tr>

       <tr>

            <td colspan="2"><input type="submit" value="提交"/></td>

        </tr>

    </table>

</form:form>

从上述代码中我们可以看出来我们就是给select标签加了一个items属性，然后指定其数据源为当前pageContext的ballMap属性。此时，将渲染出如下效果：



答案很明显，当select标签指定了items属性的时候，它会忽略其标签体的内容，而使用items指定的内容来渲染出可选项。

对于第二个问题，我们把视图代码改为如下形式：

Jsp代码 

<form:form action="formTag/form.do" method="post" commandName="user">
<table>
<tr>
<td>最喜欢的运动:</td>
<td>
<form:select path="favoriteBall">
<option>请选择</option>
<form:option value="1">篮球</form:option>
<option value="4">羽毛球-A</option>
<form:option value="4">羽毛球-B</form:option>
</form:select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"/></td>
</tr>
</table>
</form:form>
<form:form action="formTag/form.do" method="post" commandName="user">

    <table>

        <tr>

            <td>最喜欢的运动:</td>

            <td>

               <form:select path="favoriteBall">

                   <option>请选择</option>

                   <form:option value="1">篮球</form:option>

                   <option value="4">羽毛球-A</option>

                   <form:option value="4">羽毛球-B</form:option>

               </form:select>

            </td>

        </tr>

       <tr>

            <td colspan="2"><input type="submit" value="提交"/></td>

        </tr>

    </table>

</form:form>

我们可以看到，在上面代码中，我们定义了一个select标签，其绑定了当前表单对象user的favoriteBall属性，而且我们没有给该select指定items数据源。值得注意的是在该select标签体中我们通过普通HTML
option和SpringMVC option标签定义了两个value均为4的option元素，而且我们也知道当前表单对象user的favoriteBall属性的值是4。接着我们来看一下上面代码渲染出的效果：



接着我们把上述代码中以SpringMVC option标签定义的option给删除，再看一下其渲染出的效果如下：



由此我们可以看出SpringMVC option标签和普通HTML option标签的区别就在于普通HTML option标签不具备数据绑定功能，而SpringMVC option标签具有数据绑定功能，它能把当前绑定的表单对象的属性对应的值对应的option置为选中状态。

1.11 options标签

使用options标签的时候需要我们指定其items属性，它会根据其items属性生成一系列的普通HTML option标签。这里的items属性的可取数据类型及其对应的渲染规则跟select的items属性是一样的。

Jsp代码 

<form:form action="formTag/form.do" method="post" commandName="user">
<table>
<tr>
<td>最喜欢的运动:</td>
<td>
<form:select path="favoriteBall">
<option>请选择</option>
<form:options items="${ballMap}"/>
</form:select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"/></td>
</tr>
</table>
</form:form>
<form:form action="formTag/form.do" method="post" commandName="user">

    <table>

        <tr>

            <td>最喜欢的运动:</td>

            <td>

               <form:select path="favoriteBall">

                   <option>请选择</option>

                   <form:options items="${ballMap}"/>

               </form:select>

            </td>

        </tr>

       <tr>

            <td colspan="2"><input type="submit" value="提交"/></td>

        </tr>

    </table>

</form:form>

上面代码将渲染出如下效果：