0

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 の選択された値の 2 つの値が必要です。

4

3 に答える 3

3

どうぞ：

<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 がレンダリングされませんでした。ドキュメンテーションjava.lang.Stringによると、idが el をサポートする場合は id を評価する必要があり、これは次のようになります。

javax.el.ValueExpression (java.lang.String に評価される必要があります)

おそらくその理由はhasのメソッドpublic void setValueExpression(String name, ValueExpression binding)にあります。javax.faces.component.UIComponentif (!(binding.isLiteralText()))

id で el を使用できないことを理解するのに役立つことを願っています。

于 2013-03-11T08:44:51.793 に答える
1

add a class to your select 

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

and the js part

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

DEMO

于 2013-03-11T07:15:24.333 に答える
0

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を使用してこの機能を取得することはできません

于 2013-03-11T11:25:20.893 に答える