如何从selectOneMenu项填充inputText? [英] How to populate inputText from selectOneMenu item?
问题描述
到目前为止，我还没有找到正确的方法.我有一个inputText绑定到对象中的变量.我有一个selectOneMenu项下拉列表，全部都很好.当时的想法是，选中该选项后，我会将所选文本从下拉列表中推入输入框(模拟输入内容).显然那是不行的.我可以很容易地在javascript onselect处理程序中获取所选元素的文本，但是inputText拒绝接受它(大概是选择重新显示存储的空字符串，而不是接受它作为输入并将其推送到对象).我也尝试过直接在Java中设置字符串，但结果完全相同(什么也没有发生).显然我的整个方法都是有缺陷的.什么是正确的方法?一些不起作用的示例xhtml代码如下(所涉及的Java是简单的getter/setter):
So far I've not been able to hit on the right way to do it. I've got an inputText bound to a variable in an object. I've got a selectOneMenu item dropdown all full of goodness. The thought was that when selected, I'd just push the selected text from the dropdown into the input box (simulating typing it). Apparently that's a no go. I can grab the text of the selected element in a javascript onselect handler easily enough, but the inputText refuses to accept it (presumably choosing to redisplay the stored empty string rather than accept this as input and push it to the object). I've also tried setting the string directly in Java, but with the exact same results (of nothing happening). Apparently my entire approach is flawed. What's the right way to do this? Some sample xhtml code that doesn't work follows (the java involved is simple 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>
推荐答案
有两个错误:
-
select事件是导致HTML<select>元素发生更改的错误事件.您需要change代替.
The
selectevent is the wrong event to hook on change of the HTML<select>element. You needchangeinstead.
<h:selectOneMenu id="dropdown" onchange="dropdownSelect()">
The textContent property doesn't exist on HTML DOM object representation of the HTML <input> element, the HtmlInputElement. You need value instead.
document.getElementById("form:part").value = text;
这些问题都与JSF不相关.这只是基本的HTML/JS.对于由PHP，ASP甚至纯HTML生成的相同HTML内容，您将遇到完全相同的问题.
Neither of those problems are related to JSF. It's just basic HTML/JS. You'd have exactly the same problem on the same HTML content generated by PHP, ASP or even plain HTML.
对于您感兴趣的情况，"JSF-ish"方式如下所示:
For the case you're interested, the "JSF-ish" way would be something like follows:
<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;
}
这篇关于如何从selectOneMenu项填充inputText?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
