[英]Using ClientID to get value from textbox does not work with JavaScript
[英]How to get the value of selectOneMenu by using clientId in Javascript Method?
我有一个包含selectOneMenu的数据表。 我想通过使用clientId在Javascript方法中获取selectOneMenu的选定值。 我已经尝试过以下代码。
<p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:selectOneMenu id="selector_#{rowIndex}" onchange="select(#{rowIndex});">
<f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
<f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
<f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
</p:selectOneMenu>
</p:dataTable>
<script type="text/javascript">
function select(rowIndex){
selector = "selector_" + rowIndex;
var element = $("select[name$=" + selector +" option:selected").val();
alert(element);
}
</script>
我需要在javascript方法中使用两个值,rowIndex和selectOneMenu的选定值
干得好:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="/WEB-INF/templates/globalTemplate.xhtml">
<ui:define name="title">15320268</ui:define>
<ui:define name="content">
<p:growl id="growl" showDetail="true" />
<h:form>
<p:dataTable var="name" value="#{so15320268.nameList}" rowIndexVar="rowIndex" widgetVar="table">
<p:column>
<p:selectOneMenu widgetVar="menu_#{rowIndex}" onchange="select(menu_#{rowIndex});">
<f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
<f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
<f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
</p:selectOneMenu>
</p:column>
</p:dataTable>
</h:form>
<script type="text/javascript">
function select(widgetVar){
var selectMenuDiv = widgetVar.getJQ(); // it will give you the underlying jquery object
//alert(selectMenuDiv.get(0)); // uncoment this line it will show: [object HTMLDivElement];
// so it is not select element
var selectMenu = $(selectMenuDiv).find('select');
var selectValue = $('> option:selected', selectMenu).val();
alert(selectValue);
}
</script>
</ui:define>
</ui:composition>
查看下图,这是<p:selectOneMenu/>
呈现方式:
仔细查看突出显示的div的ID。 它以selector_
结尾。 xhtml是: <p:selectOneMenu id="selector_#{rowIndex}"
。 您试图用el和JSF创建id,这是不允许的,这就是为什么#{rowIndex}
没有为id渲染的原因。 文档说如果id支持id,则必须将其评估为java.lang.String
,这将是
javax.el.ValueExpression(必须评估为java.lang.String)
原因可能是在javax.faces.component.UIComponent
的方法public void setValueExpression(String name, ValueExpression binding)
中具有if (!(binding.isLiteralText()))
。
希望它能帮助您了解不能在id中使用的el。
将课程添加到您的选择
<p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:selectOneMenu styleClass="myClass" id="selector_#{rowIndex}" data-rowindex="#{rowIndex}">
<f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
<f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
<f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
</p:selectOneMenu>
</p:dataTable>
和js部分
<script type="text/javascript">
$(function(){
$(".myClass").change(function(e){
console.log($(this).val());
console.log($(this).attr("data-rowindex"));
//or
//console.log($(this).data('rowindex'));
});
});
</script>
我通过使用styleClass解决了它。 现在,我可以在javascript方法中同时获取选定的值和rowIndex。
<p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:column>
<p:selectOneMenu id="selector_#{rowIndex}" styleClass="menu_#{rowIndex}" onchange="select('#{rowIndex}');">
<f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
<f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
<f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
</p:selectOneMenu>
</p:column>
</p:dataTable>
<script type="text/javascript">
function select(rowIndex){
var menuClassName = "menu_" + rowIndex;
var element = $("select[class$='" + menuClassName + "'] option:selected").val();
}
</script>
但是根据我的问题,我仍然无法使用clientId获得此功能
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.