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 bean？

Answer 1

使用JSF组件而不是纯HTML元素。 JSF组件允许您将值绑定到bean属性。表示HTML <select>元素的JSF组件是<h:selectOneMenu>，您可以使用<f:selectItem>或<f:selectItems>指定选项。

E.g。

<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应用程序。

如何修改我的页面并将我选择的选项传递给java bean

2 个答案: