1.10 option標籤
option標籤會被渲染爲一個普通的HTML option標籤。當一個SpringMVC select標籤沒有通過items屬性指定自己的數據源的時候,我們就可以在select標籤中通過普通HTML option標籤或者SpringMVC option標籤來指定可以選擇的項。
- <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標籤呢?
先來解釋第一個問題,我們把上面的視圖代碼改爲如下形式:
- <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指定的內容來渲染出可選項。
對於第二個問題,我們把視圖代碼改爲如下形式:
- <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屬性是一樣的。
- <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>
上面代碼將渲染出如下效果: