HTML 下拉菜单。根据下拉菜单更改 Div答案

【问题标题】：Html dropdown. Change Div based on dropdownHTML 下拉菜单。根据下拉菜单更改 Div
【发布时间】：2013-02-05 11:07:00
【问题描述】：

嘿，谁能帮帮我，我正在尝试根据我在下拉菜单中选择的内容在屏幕上显示一个 div

<------------DropdownDiv---------->

    <div id="recordActivityDropdownDiv" style="padding: 5px">
        <h:selectOneMenu id="recordActivityDropdown" style="width:200px;" value="">
            <f:selectItem itemLabel="Email" itemValue="1"/>
            <f:selectItem itemLabel="Letter" itemValue="2"/>                                
        </h:selectOneMenu>  
    </div>

<------------Display this is letter is selected in dropdown menu Div---------->

    <div style="height:100%; width:99%; float:left">
        <div style="padding-top: 15px; padding-left: 5px; width: 20%; float: left;">
        letter:
        </div>
        <div style="height:100%; width:77%; float:left">
            <div style="padding: 5px; float:left;">
                <h:inputText id="letterbox" style="width:200px" value="" />
        </div>              
    </div>

【问题讨论】：

既然你用的是jsf，为什么不把这样的div换成JSF容器呢？然后，当您选择您的选择时，只需使用所选值更新它。

标签： html jsf-2

【解决方案1】：

如 cmets 中所述，您的代码看起来有点像这样：

...
    <h:selectOneMenu value="#{bean.selectValue} id="recordActivityDropdown" style="width:200px;" value="">
        <f:selectItem itemLabel="Email" itemValue="1"/>
        <f:selectItem itemLabel="Letter" itemValue="2"/>
        <f:ajax listener="#{bean.valueChanged}" update="myGroup" />                                
    </h:selectOneMenu>  
...

...
<h:panelGroup id="myGroup" style="height:100%; width:99%; float:left">
    <div style="padding-top: 15px; padding-left: 5px; width: 20%; float: left;">
        letter: <h:outputText value="#{bean.selectValue}" />
    </div>
    ...              
</h:panelGroup>
...

这将更新（通过ajax）现在的panelGroup，即您的“div”。它将获取selectOneMenu 的值并将其打印到 div。

另见：

【讨论】：