javascript 使用primefaces中的javascript从selectOnemenu中获取选定的值并打开一个对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10891586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get selected value from selectOnemenu using javascript in primefaces and open a dialog box
提问by Java
How can we get the selected value of PrimeFaces <p:selectOneMenu>using JavaScript/jQuery?
我们如何<p:selectOneMenu>使用 JavaScript/jQuery获取 PrimeFaces 的选定值？
I am trying to get it this way, but it does not go inside if condition, which means that the ID of the element is not correct.
我试图通过这种方式获得它，但它不会进入 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>
回答by BalusC
JSF runs on webserver and generates HTML which get sent to webbrowser. JavaScript/jQuery runs on webbrowser and doesn't see anything of the JSF source code, but only its HTML output.
JSF 在网络服务器上运行并生成发送到网络浏览器的 HTML。JavaScript/jQuery 在 webbrowser 上运行并且看不到任何 JSF 源代码，而只看到它的 HTML 输出。
Open the page in browser, rightclick and View Source(or here on PrimeFaces showcase site). You'll see that the actual <select>element has the ID of the parent <h:form>prepended and the word _inputsuffixed (because the <p:selectOneMenu>basically generates a <div><ul><li>to achieve the fancy look'n'feel which isn't possible with a plain <select>, thus it's been hidden away).
在浏览器中打开页面，右键单击并查看源代码（或在 PrimeFaces 展示站点上）。你会看到实际的<select>元素在<h:form>前面_input加上了父元素的 ID并加上了单词的后缀（因为<p:selectOneMenu>基本上会生成 a<div><ul><li>来实现普通的无法实现的奇特外观<select>，因此它被隐藏了）。
So, if you give the parent form a fixed ID (so that JSF doesn't autogenerate one), then the following JSF code
所以，如果你给父表单一个固定的 ID（这样 JSF 不会自动生成一个），那么下面的 JSF 代码
<h:form id="form">
<p:selectOneMenu id="someSelect" ...>
will generate the HTML <select>as follows:
将生成<select>如下HTML ：
<select id="form:someSelect_input">
You need to use exactlythat ID instead to grab the element from DOM.
您需要准确地使用该 ID 来从 DOM 中获取元素。
$("#form\:someSelect_input");
or
或者
$("[id='form:someSelect_input']");
See also:
也可以看看：
Unrelatedto the concrete problem, you've there another problem with that <p:dialog>. It contains another <h:form>and thus you're effectively nesting forms which is illegalin HTML! Put that entire <p:dialog>outsidethe form like so:
与具体问题无关，你还有另一个问题<p:dialog>。它包含另一个<h:form>，因此您有效地嵌套了在 HTML 中非法的表单！将整个内容<p:dialog>放在表单之外，如下所示：
<h:form>
<p:selectOneMenu ... />
</h:form>
<p:dialog>
<h:form>
...
</h:form>
</p:dialog>
回答by Daniel
try changing
尝试改变
if($('#someSelect').val() == 'India') {
into
进入
if($("select[name$='someSelect_input'] option:selected").val() == 'India') {
EDIT
编辑
you can improve the selector by changing
您可以通过更改来改进选择器
name$='someSelect_input'
into
进入
name='yourFormName\:someSelect_input'
回答by Cristian Casta?o
I my friends. i found the following solution.
我我的朋友们。我找到了以下解决方案。
<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>
