使用javascript更改primefaces selectonemenu标签/值答案

【问题标题】：change primefaces selectonemenu label / value with javascript使用javascript更改primefaces selectonemenu标签/值
【发布时间】：2015-07-06 11:36:40
【问题描述】：

我有一个文本字段和一些选择菜单。如果我在文本字段中写入内容，我想更新所选项目/下拉列表的标签，反之亦然：

问题是我无法从文本字段事件中访问下拉标签。

文本字段的 JSF：

<p:inputText id="nameInput"value="#{searchProject.searchName}" onkeyup="textToDropdown()"/>

选择菜单的 JSF：

<p:selectOneMenu id="brand" value="#{searchProject.brand}">
    <f:selectItem itemLabel="" itemValue="" />
    <f:selectItems value="#{createProject.brands}" var="i" itemLabel="#{i.value} - #{i.label}" itemValue="#{i}"/>
    <f:converter binding="#{AttributeConverter}" />
</p:selectOneMenu>

到目前为止我的 Javascript：

<script type="text/javascript">
    function textToDropdown(){
    var x = document.getElementById("selectionForm:entryActionTabs:namePatternInput");
    //if the text of the input is bigger than 2, fill the first dropdown        
    if(x.value.length >= 2)
        {
            //I DONT KNOW HOW DO ACCESS THE LABEL OF THE DROPDOWN
        }
    }
</script>

那么我尝试更改标签是什么？我检查了 DOM 并在下拉列表下方找到了一个带有 id 的标签：

picture of the DOM

因此我尝试直接访问标签，用javascript更改文本：

var label= document.getElementById("selectionForm:entryActionTabs:brand_selection2_label");

但是我只得到了一个未定义的对象...我的第二种方法是使用 .innerHtml 但我如何使用它访问标签？还包括其他三个 div 类。

【问题讨论】：

组合框是一个可编辑的下拉菜单，如<p:selectOneMenu editable="true">。但是，你没有这样的一个。所以我修正了你问题中的不正确术语。

标签： javascript jsf primefaces

【解决方案1】：

得到标签：

var label1 = document.getElementById("selectionForm:entryActionTabs:brand_selection2").getElementsByTagName("label")[0];                
            label1.innerHTML="HI";

但我仍然想知道为什么我不能直接使用完整 ID，以及是否有更好的方法来获取标签。我确定有一个。

【讨论】：