如何修改我的页面并将我选择的选项传递给 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>

显示功能正在修改我的页面执行以下操作：

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

和

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

现在，我如何将我选择的选项传递给 java beans？

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 教程，看起来你完全错过了手动编写所有 HTML/JS 的 JSF 的意义。或者，如果您打算完全控制 HTML/JS，最好寻找基于动作的 MVC 框架，例如 Spring MVC，而不是基于组件的 MVC 框架，例如 JSF。

Answer 2

使用 AJAX。这允许您将数据发送到服务器，而无需更改网页上的任何内容。

尝试使用像 jQuery 这样的框架，它提供 AJAX (docs) 和许多其他很棒的东西来构建 HTML5 应用程序。