如何从 selectOneMenu 项中填充 inputText？答案

【问题标题】：How to populate inputText from selectOneMenu item?如何从 selectOneMenu 项中填充 inputText？
【发布时间】：2013-01-10 19:32:00
【问题描述】：

到目前为止，我还没有找到正确的方法。我有一个 inputText 绑定到对象中的变量。我有一个 selectOneMenu 项目下拉菜单，非常棒。 The thought was that when selected, I'd just push the selected text from the dropdown into the input box (simulating typing it).显然这是不行的。我可以很容易地在 javascript onselect 处理程序中获取所选元素的文本，但 inputText 拒绝接受它（可能选择重新显示存储的空字符串而不是接受它作为输入并将其推送到对象）。我也尝试过直接在 Java 中设置字符串，但结果完全相同（没有发生任何事情）。显然我的整个方法是有缺陷的。这样做的正确方法是什么？下面是一些不起作用的示例 xhtml 代码（涉及的 java 是简单的 getter/setter）：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
      <script type="text/javascript">
        function dropdownSelect() {            
            var element=document.getElementById("form:dropdown");
            var text=element.options[element.selectedIndex].value;
            document.getElementById("form:part").textContent=text; // TODO doesn't work.  Neither does forcing the part number to change inside the object via Java code
        }
    </script>    
    <h:body>
        <h:form id="form">
            <h:inputText id="part" value="#{part.partNumber}"/>
            <h:selectOneMenu id="dropdown" onselect="dropdownSelect()">                
                <f:selectItems value="#{part.list}"/>
            </h:selectOneMenu>
        </h:form>
    </h:body>    
</html>

【问题讨论】：

标签： javascript jsf-2

【解决方案1】：

有两个错误：

select 事件是挂钩 HTML <select> 元素更改的错误事件。你需要change。
```
<h:selectOneMenu id="dropdown" onchange="dropdownSelect()">
```
textContent 属性在 HTML <input> 元素的 HTML DOM 对象表示中不存在，HtmlInputElement。你需要value。
```
document.getElementById("form:part").value = text;
```

这些问题都与 JSF 无关。它只是基本的 HTML/JS。对于由 PHP、ASP 甚至纯 HTML 生成的相同 HTML 内容，您会遇到完全相同的问题。

对于您感兴趣的情况，“JSF-ish”方式如下所示：

<h:form>
    <h:inputText id="part" value="#{part.partNumber}"/>
    <h:selectOneMenu value="#{part.selectedNumber}">
        <f:selectItems value="#{part.list}"/>
        <f:ajax listener="#{part.changeNumber}" render="part" />
    </h:selectOneMenu>
</h:form>

与

public void changeNumber(AjaxBehaviorEvent event) {
    partNumber = selectedNumber;
}

【讨论】：

完美！做了这些快速的改变，我现在可以走了。谢谢！
嗯，这很奇怪。我认为它可以工作，但是一旦我将它投入生产，它就会因各种古怪的相位错误而爆炸。所以，我转储了 js 方法并切换到您的 JSF 方法。这可以解决相位误差的问题。
你到底得到了什么错误？我不认为“相位错误”是 JS 特有的。
好吧，好吧，这也很奇怪。切换到 JSF 方法后，它工作了很短的时间，现在失败了，出现与 js 方法相同的错误！ “警告：JSF1087：无法生成 Facelets 错误页面，因为已提交响应。严重：javax.faces.FacesException：PWC3999：提交响应后无法创建会话”
PWC3999 在这里回答：stackoverflow.com/questions/8072311/… 至少更新到 Mojarra 2.1.8。