如何修改我的頁面並將我選擇的選項傳遞給 java bean

Question

我正在使用 html 代碼來顯示我的頁面，具體取決於我單擊的所選選項。 但現在我也想將我選擇的選項傳遞給 java bean。

我的 4 個選項

<tr>
<td class="title">Category:</td>
<td class="field">
    <select name="list" onchange="display(this,'truck','car');">
    <option>Please select:</option>
    <option value="invisible">Bike</option>
    <option value="invisible">Quad</option>
    <option value="car">Car</option>
    <option value="truck">Truck</option>
    </select>
</td>
</tr>

我正在使用的腳本

<script type="text/javascript">
function display(obj,id1,id2) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    if ( txt.match(id1) ) {
        document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
        document.getElementById(id2).style.display = 'block';
    }
}

</script>

顯示 function 正在修改我的頁面，執行以下操作：

<tbody id="car" style="display: none;">

和

<tbody id="truck" style="display: none;">

現在，我如何將我選擇的選項傳遞給 java bean？

Answer 1

使用 JSF 組件代替普通的 HTML 元素。 JSF 組件允許您將值綁定到 bean 屬性。 代表 HTML <select>元素的 JSF 組件是<h:selectOneMenu> ，您可以在其中使用<f:selectItem>或<f:selectItems>指定選項。

例如

<h:selectOneMenu id="list" value="#{bean.vehicle}" onchange="display(this,'truck','car');">
    <f:selectItem itemValue="#{null}" itemLabel="Please select:" />
    <f:selectItem itemValue="invisible" itemLabel="Bike" />
    <f:selectItem itemValue="invisible" itemLabel="Quad" />
    <f:selectItem itemValue="car" itemLabel="Car" />
    <f:selectItem itemValue="truck" itemLabel="Truck" />
</h:selectOneMenu>

和

private String vehicle;

// Getter+setter.

如果您使用的是 JSF 2.x，那么您也可以只使用<f:ajax>而不是所有 JavaScript 樣板。 我建議花一些時間閱讀一些體面的 JSF 教程，看起來你完全錯過了 JSF 手動編寫所有 HTML/JS 的要點。 或者，如果您打算完全控制 HTML/JS，最好尋找基於動作的 MVC 框架，例如 Spring MVC，而不是基於組件的 MVC 框架，例如 JSF。

Answer 2

使用 AJAX。 這使您可以在不更改 web 頁面上的任何內容的情況下將數據發送到服務器。

嘗試像jQuery這樣的框架，它提供 AJAX（文檔）和許多其他很酷的東西來構建 HTML5 應用程序。