如何从selectOneMenu项填充inputText?

时间:2013-01-10 19:32:00

标签: javascript jsf-2

到目前为止,我还没有能够以正确的方式做到这一点。我有一个inputText绑定到对象中的变量。我有一个完全善良的selectOneMenu项目下拉列表。我的想法是,选中后,我只需将选定的文本从下拉列表输入到输入框中(模拟输入)。显然这是不行的。我可以很容易地在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>

1 个答案:

答案 0 :(得分:1)

有两个错误:

  1. select事件是挂钩更改HTML <select>元素的错误事件。您需要change代替。

    <h:selectOneMenu id="dropdown" onchange="dropdownSelect()">
    
  2. HTML textContent元素HtmlInputElement的HTML DOM对象表示中不存在<input>属性。您需要value代替。

    document.getElementById("form:part").value = text;
    
  3. 这些问题都与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;
    }