使用javascript更改primefaces selectonemenu标签/值

Question

i have a textfield and a few selectonemenus. If i write something into the textfield, i want to update the selected items / the label of the dropdowns and the other way around:

The problem is i can't access the dropdown label from the textfield event.

JSF for the textfield:

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

JSF for the selectonemenu:

<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>

My Javascript so far:

<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>

So what did i try to change the label ? I checked the DOM and found a label underneath the dropdown with a id:

picture of the DOM

Therefore i tried to access the label directly, with javascript to change the text:

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

But i only get a undefined object back...my second approach would be to use the .innerHtml but how to i access the label with that ? there are also the three other div-classes included.

Answer 1

Got the label with:

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

but i still would like to know why i cant use the full-ID directly and if there is a better way to get the label. I'm sure there is one.