0

我们如何<p:selectOneMenu>使用 JavaScript/jQuery 获取 PrimeFaces 的选定值？

我试图以这种方式获取它，但它没有进入 if 条件，这意味着元素的 ID 不正确。

<h:head> 
    <script> 
        function showDialog() { 
            alert("insdie function"); 
            if($('#someSelect').val() == 'India') { 
                dlg.show(); 
                alert("after function"); 
            } 
            alert("outside function"); 
        }   
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <p:selectOneMenu 
                    id="someSelect" 
                    value="#{testController.countryName}" 
                    <f:selectItem itemLabel="Select One" itemValue="" /> 
                    <f:selectItems value="#{addPatientProfileBB.patStatusSelect}" 
                        itemLabel="#{testController.countryName}" 
                        itemValue="#{testController.countryNameId}" /> 
                    <p:ajax process="someSelect" update="dialog" oncomplete="showDialog()"/> 
                </p:selectOneMenu> 
            </h:panelGrid> 

            <p:dialog id="dialog" header="Login" widgetVar="dlg"> 
                <h:form> 
                    <h:panelGrid columns="2" cellpadding="5"> 
                        <h:outputLabel for="username" value="Username:" /> 
                        <p:inputText id="username" required="true" label="username" /> 
                    </h:panelGrid> 
                </h:form> 
            </p:dialog> 
        </p:panel>  
    </h:form> 
</h:body>
4

3 回答 3

6

JSF 在网络服务器上运行并生成发送到网络浏览器的 HTML。JavaScript/jQuery 在 webbrowser 上运行，看不到任何 JSF 源代码，只能看到其 HTML 输出。

在浏览器中打开页面，右键单击并查看源代码（或在 PrimeFaces 展示网站上）。您会看到实际<select>元素的前缀是父元素的 ID<h:form>和后缀的单词_input（因为<p:selectOneMenu>基本上会生成 a<div><ul><li>以实现普通 无法实现的花哨外观<select>，因此它被隐藏了）。

所以，如果你给父表单一个固定的 ID（这样 JSF 不会自动生成一个），那么下面的 JSF 代码

<h:form id="form">
    <p:selectOneMenu id="someSelect" ...>

<select>将按如下方式生成 HTML ：

<select id="form:someSelect_input">

您需要完全使用该 ID 来从 DOM 中获取元素。

$("#form\\:someSelect_input");

或者

$("[id='form:someSelect_input']");

也可以看看：

与具体问题无关，您还有另一个问题<p:dialog>。它包含另一个<h:form>，因此您实际上是在嵌套 HTML 中非法的表单！将整个放在表格之外，如下所示<p:dialog> ：

<h:form>
    <p:selectOneMenu ... />
</h:form>
<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>
于 2012-06-05T05:04:11.863 回答
5

尝试改变

if($('#someSelect').val() == 'India') {

进入

if($("select[name$='someSelect_input'] option:selected").val() == 'India') {

编辑

您可以通过更改来改进选择器

name$='someSelect_input'

进入

name='yourFormName\\:someSelect_input'
于 2012-06-05T05:04:21.827 回答
0

我我的朋友。我找到了以下解决方案。

<h:head> 
    <script> 
        function showDialog() {
            alert(PF('selectWV').getSelectedValue());
            if (PF('selectWV').getSelectedValue() == "b") {
                PF('buttonWV').jq.show();
            } else {
                PF('buttonWV').jq.hide();
            }
        }  
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <h:form>
            <p:selectOneMenu style="width:150px" id="id" widgetVar="selectWV">  
                <f:selectItem itemLabel="Select" itemValue="a"></f:selectItem>
                <f:selectItem itemLabel="Other" itemValue="b"></f:selectItem>
                <p:ajax process="id" update="dos" oncomplete="showDialog()"/>
            </p:selectOneMenu>
            <p:commandButton value="Register" widgetVar="buttonWV"
                style="display: none" />
        </h:form>
            </h:panelGrid> 
        </p:panel>  
    </h:form> 
</h:body>
于 2017-02-19T19:17:42.153 回答