在 JavaScript 中获取 p:selectOneMenu 的选定值答案

【问题标题】：Fetch selected value of p:selectOneMenu in JavaScript在 JavaScript 中获取 p:selectOneMenu 的选定值
【发布时间】：2014-09-28 21:43:38
【问题描述】：

我需要在 javascript 中获取 <p:selectOneMenu> 的值，但我得到的结果是 null。我可以调用该函数，但是当我尝试访问<p:selectOneMenu> 的值时。我在警告框中得到空值。

请找到下面的代码。

<p:outputLabel for="year" value="Year: " /> 
        <p:selectOneMenu id="year" style="width:150px   " value="#{someBean.year}">
        <f:selectItem itemLabel="All" itemValue="All"/>
        <f:selectItem itemLabel="2014" itemValue="2014"/>
        <f:selectItem itemLabel="2013" itemValue="2013"/>
        <f:selectItem itemLabel="2012" itemValue="2012"/>
        <f:selectItem itemLabel="2011" itemValue="2011"/>
        <f:selectItem itemLabel="2010" itemValue="2010"/>
        <f:selectItem itemLabel="2009" itemValue="2009"/>
    </p:selectOneMenu>

Javascript 函数：

function validateYearMonth()
{
    var yearValue1=document.getElementById('Form:year_input');
    var yearValue2=document.getElementById('Form:year');
    alert(yearValue1);
    alert(yearValue2);

}

调用函数：

 <p:commandButton id="Submit" action="#{someBean.functionName}"
    onclick="validateYearMonth()" value="Submit" ajax="false" style="float:right;">
  </p:commandButton>

我不明白怎么了。 虽然我可以获取元素如果我正在做

var yearValue1=document.getElementById('Form:year_input');

但我无法获取值。非常感谢任何帮助。

【问题讨论】：

@BalusC：我尝试了你的方法..我已经用你提供的解决方案更新了我的问题，但即使对他们来说我也得到了空值。 Year 是我的实体 ID，year_input 是我在查看源代码后得到的 id。为什么我收到 null？
@BalusC ：不，根据所做的更改，我没有得到未定义。但是我在 validateYearMonth 函数中提到的两个警报中都为空。
@BalusC ：我能做些什么来解决这个问题吗？请指导。

标签： javascript jsf jsf-2 primefaces selectonemenu

【解决方案1】：

一个非常简单的方法是设置一个widgetVar 名称，然后获取当前值！

<p:selectOneMenu widgetVar="yearWV">

在 javascript 中（PF 4 及更高版本）

PF('yearWV').value

您可以立即在控制台中进行测试

【讨论】：

【解决方案2】：

    **BEST WORKING SOLUTION :**

       <p:selectOneMenu id="year" style="width:150px" value="#{someBean.year}" widgetVar="test" onchange="myTestFunction()">
                <f:selectItem itemLabel="All" itemValue="All"/>
                <f:selectItem itemLabel="2014" itemValue="2014"/>
                <f:selectItem itemLabel="2013" itemValue="2013"/>
                <f:selectItem itemLabel="2012" itemValue="2012"/>
                <f:selectItem itemLabel="2011" itemValue="2011"/>
                <f:selectItem itemLabel="2010" itemValue="2010"/>
                <f:selectItem itemLabel="2009" itemValue="2009"/>
            </p:selectOneMenu>

Java Script Code:

function myTestFunction()
        {

        var selectedValue=PF('test').getSelectedValue();

        alert(selectedValue);

        }

    [**For more information please check this link ** https://forum.primefaces.org/viewtopic.php?t=39793][1]

【讨论】：

未定义值，getSelectedValue 完成了这项工作，谢谢。

【解决方案3】：

您必须在 onclick 事件中添加 return 关键字。例如。

         <p:commandButton id="Submit" action="#{someBean.functionName}"
          onclick="return validateYearMonth()" value="Submit" ajax="false" style="float:right;">
    </p:commandButton>

【讨论】：

试过了，但我仍然不确定。

【解决方案4】：

在您的 JSF 表单中，设置 prependId=false。即

<h:form id="myform" prependId="false">

如果您没有将 prependId 设置为 false，那么您在生成的 HTML 下拉列表的 id 中获得的内容将是

<select id="myform:year">

在这种情况下，在您的 javascript 中，您必须使用 document.getElementById("myform:year"); 获取元素；

【讨论】：

感谢您的回答。帮助我取得了一些进展。我按照你说的做了，但现在我在警报框中得到一个空值。我错过的任何东西。
@Shirish 你的alert 带有未定义的变量。例如使用year，但它应该是yearValue。请参阅month 案例。
试试这个：var e = document.getElementById("year");var yearValue = e.options[e.selectedIndex].value;
我已经更新了我的答案。我面临的主要问题是我一开始就收到 null 。可能是什么问题？
我怀疑您是否在 javascript 中为选择列表组件使用了正确的 id。如果您使用的是 Firefox，您可以右键单击选择列表并选择“检查元素”。我将您的 javascript 放入 JSFiddle 并进行了一些修改以让您了解它是如何工作的：jsfiddle.net/TL8r2