Question

我有3个组合框

COMBO1 Combo2 Combo3

如果Combo1为空（无选择），则隐藏combo2。如果Combo2为空，则隐藏Combo3。

如果更改了Combo1，它会使Combo2空白，如果更改了Combo2，它会使Combo3空白。

这是因为Combo2的选择由Combo2的Combo1和Combo3选择决定。这一切都运作良好。

如果我更改Combo1然后Combo2和Combo3正在按预期被消隐但是Combo3没有被隐藏，会发生什么。如果我所做的只是再次更改Combo1，则隐藏Combo3。这几乎就像我需要2个更新事件。

有什么方法吗？

更新

问题似乎是计算选择值的组合框。在下面的示例中，更改状态应使ShowRoom范围变量为“0”。“更改楼层”将其设置为“1”。计算字段将显示范围变量的当前值。看来状态组合框的onChange事件没有被触发。如果您将城市选择从计算值更改为静态值，那么它可以正常工作。

    Not&#160;Working (Computed&#160;Selections)<xp:table style="width:100%" id="tblSurvey2">

    <xp:tr>
        <xp:td style="width:300px">
            <xp:label value="*State" style="width:66.0px" styleClass="FieldLabel" id="label1">
            </xp:label>

        </xp:td>
        <xp:td style="width:745.0px">

            <xp:comboBox id="comboBoxState2" style="width:173.0px">



                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.put("ShowRoom2","0");}]]></xp:this.action>
                </xp:eventHandler>






                <xp:selectItem itemLabel="AL"></xp:selectItem>
                <xp:selectItem itemLabel="CA"></xp:selectItem>
                <xp:selectItem itemLabel="NY"></xp:selectItem>
                <xp:selectItem itemLabel="PA"></xp:selectItem>
            </xp:comboBox>
            State =&#160;
            <xp:text escape="true" id="computedField1">
                <xp:this.value><![CDATA[#{javascript:getComponent("comboBoxState2").getValue()}]]></xp:this.value>
            </xp:text>
            &#160;&#160;&#160;Show Room =&#160;
            <xp:text escape="true" id="computedField4">
                <xp:this.value><![CDATA[#{javascript:viewScope.get("ShowRoom2");}]]></xp:this.value>
            </xp:text>
        </xp:td>
    </xp:tr>
    <xp:tr id="tr1">

        <xp:td style="width:300px">
            <xp:label value="*City" style="width:66.0px" styleClass="FieldLabel" id="label2">
            </xp:label>
        </xp:td>
        <xp:td style="width:785.0px">
            <xp:comboBox id="comboBoxCity2" style="width:175.0px">

                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="norefresh" id="eventHandler1">
                </xp:eventHandler>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2" id="eventHandler2"></xp:eventHandler>










                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:new Array(getComponent("comboBoxState2").getValue() + " City1", getComponent("comboBoxState2").getValue() + " City2", getComponent("comboBoxState2").getValue() + " City3");}]]></xp:this.value>
                </xp:selectItems>
            </xp:comboBox>
        </xp:td>
    </xp:tr>

    <xp:tr id="tr2">

        <xp:td style="width:300px">
            <xp:label value="*Floor" style="width:66.0px" styleClass="FieldLabel" id="label3">
            </xp:label>
        </xp:td>
        <xp:td style="width:745.0px">
            <xp:comboBox id="comboBoxFloor2" style="width:89.0px">

                <xp:eventHandler event="onclick" submit="true" refreshMode="norefresh" id="eventHandler5">
                </xp:eventHandler>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2" id="eventHandler7">
                    <xp:this.action><![CDATA[#{javascript:viewScope.put("ShowRoom2","1");}]]></xp:this.action>
                </xp:eventHandler>




                <xp:selectItem itemLabel="Floor1"></xp:selectItem>
                <xp:selectItem itemLabel="Floor2"></xp:selectItem>
                <xp:selectItem itemLabel="Floor3"></xp:selectItem>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
    <xp:tr id="tr3">
        <xp:this.rendered><![CDATA[#{javascript:viewScope.get("ShowRoom2") == "1";}]]></xp:this.rendered>
        <xp:td>
            <xp:label value="*Room" style="width:66.0px" styleClass="FieldLabel" id="label6">
            </xp:label>
        </xp:td>
        <xp:td>
            <xp:comboBox id="comboBoxRoom2" style="width:89.0px">                   
                <xp:selectItem itemLabel="A"></xp:selectItem>
                <xp:selectItem itemLabel="B"></xp:selectItem>
                <xp:selectItem itemLabel="C"></xp:selectItem>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
  </xp:table>
<xp:br></xp:br>
<xp:br></xp:br>

Answer 1

我认为您正在使用部分刷新来执行此操作？你有

C1 -> C2/C3
C2 -> C3

由于您只能拥有一个部分刷新目标，因此需要将C2 / C3包装到面板中并将其作为C1的部分刷新目标。另外检查你如何隐藏C3。您可能希望使用viewScope变量来管理状态并依赖于该状态的可见性。

更新：你应该绑定你的字段到viewScope变量，而不是设置额外的值。另外：组合框显示绑定变量值缺失或与第一个值不匹配，但不反映它。所以在组合框中你总是需要有一个有意义的第一个值“-Please select | - ”是常见的或查找实际的第一个值。在你的情况下，“请选择”是有道理的。你也可以考虑是否真的要隐藏字段（变成“神秘肉”导航）或只更新可能的选择（从下面的例子中删除渲染的属性以查看它是如何工作的。）

你走了：

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:table style="width:100%" id="tblSurvey2">
    <xp:tr>
        <xp:td style="width:300px">
            <xp:label value="*State" style="width:66.0px"
                styleClass="FieldLabel" id="label1">
            </xp:label>
        </xp:td>
        <xp:td style="width:745.0px">
            <xp:comboBox id="comboBoxState2" style="width:173.0px"
                value="#{viewScope.selectedState}">
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="tblSurvey2" id="eventHandler2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.selectedCity = "-";
viewScope.selectedFloor = "-";
       viewScope.selectedRoom = "-";}]]></xp:this.action>
                </xp:eventHandler>
                <xp:selectItem itemLabel="-Please select-"
                    itemValue="-" id="selectItem1">
                </xp:selectItem>
                <xp:selectItem itemLabel="AL" itemValue="AL" id="selectItem2"></xp:selectItem>
                <xp:selectItem itemLabel="CA" itemValue="CA" id="selectItem3"></xp:selectItem>
                <xp:selectItem itemLabel="NY" itemValue="NY" id="selectItem4"></xp:selectItem>
                <xp:selectItem itemLabel="PA" itemValue="PA" id="selectItem5"></xp:selectItem>
            </xp:comboBox>

        </xp:td>
    </xp:tr>
    <xp:tr id="tr1" style="background-color:rgb(253,250,227)">
        <xp:this.rendered><![CDATA[#{javascript:viewScope.selectedState && (viewScope.selectedState != "-")}]]></xp:this.rendered>
        <xp:td style="width:300px">
            <xp:label value="*City" styleClass="FieldLabel"
                id="label2">
            </xp:label>
        </xp:td>
        <xp:td style="width:785.0px">
            <xp:comboBox id="comboBoxCity2"
                value="#{viewScope.selectedCity}">
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" id="eventHandler1" refreshId="tblSurvey2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.selectedFloor = "-";
  viewScope.selectedRoom = "-";}]]></xp:this.action>
                </xp:eventHandler>
                <xp:selectItems id="selectItems1">
                    <xp:this.value><![CDATA[#{javascript:var hasState = viewScope.selectedState && (viewScope.selectedState != "-");
 var result = ["-Please select-|-"];
 var cities = viewScope.selectedState + " " + ["City1","City2","City3"];
 for (var x in cities) {
result.push(cities[x]);
 };
 return hasState ? result : "Please select a state first|-"; 
 }]]></xp:this.value>
                </xp:selectItems>
            </xp:comboBox>
        </xp:td>
    </xp:tr>

    <xp:tr id="tr2">

        <xp:this.rendered><![CDATA[#{javascript:viewScope.selectedCity && (viewScope.selectedCity != "-")}]]></xp:this.rendered>
        <xp:td style="width:300px">
            <xp:label value="*Floor" style="width:66.0px"
                styleClass="FieldLabel" id="label3">
            </xp:label>
        </xp:td>
        <xp:td style="width:745.0px">
            <xp:comboBox id="comboBoxFloor2"
                value="#{viewScope.selectedFloor}">

                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" id="eventHandler5" refreshId="tblSurvey2">
                    <xp:this.action><![CDATA[#{javascript:viewScope.selectedRoom = "-";}]]></xp:this.action>
                </xp:eventHandler>
                <xp:selectItems id="selectItems2">
                    <xp:this.value><![CDATA[#{javascript:var hasCity = viewScope.selectedCity && (viewScope.selectedCity != "-");
  var result = ["-Please select-|-"];
  var floors = viewScope.selectedCity + " " + ["Floor1","Floor2","Floor3"];
  for (var x in floors) {
result.push(floors[x]);
  };
  return hasCity ? result : "Please select a city first|-"; 
  }]]></xp:this.value>
                </xp:selectItems>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
    <xp:tr id="tr3" style="background-color:rgb(253,250,227)">

        <xp:this.rendered><![CDATA[#{javascript:viewScope.selectedFloor && (viewScope.selectedFloor != "-")}]]></xp:this.rendered>
        <xp:td>
            <xp:label value="*Room" style="width:66.0px"
                styleClass="FieldLabel" id="label6">
            </xp:label>
        </xp:td>
        <xp:td>
            <xp:comboBox id="comboBoxRoom2"
                value="#{viewScope.selectedRoom}">
                <xp:selectItems id="selectItems3">
                    <xp:this.value><![CDATA[#{javascript:var hasFloor = viewScope.selectedFloor && (viewScope.selectedFloor != "-");
    var result = ["-Please select-|-"];
    var rooms = viewScope.selectedFloor + " " + ["Room A","Room B","Room C"];
    for (var x in rooms) {
    result.push(rooms[x]);
  };
   return hasFloor ? result : "Please select a floor first|-"; }]]></xp:this.value>
                </xp:selectItems>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="computedField4" id="eventHandler3">
                </xp:eventHandler>
            </xp:comboBox>
        </xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>Current variables</xp:td>
        <xp:td>State:
<xp:text escape="true" id="computedField1" value="#{viewScope.selectedState}">
</xp:text>
<xp:br></xp:br>
City:
<xp:text escape="true" id="computedField2" value="#{viewScope.selectedCity}">
</xp:text>
<xp:br></xp:br>
Floor:
<xp:text escape="true" id="computedField3" value="#{viewScope.selectedFloor}">

</xp:text>
<xp:br></xp:br>Room:
<xp:text escape="true" id="computedField4" value="#{viewScope.selectedRoom}">
    </xp:text></xp:td></xp:tr></xp:table></xp:view>

您可以通过将“请选择”移动到自己的值项目中来简化代码，并使用函数而不是重复代码，但是您可以理解。

Answer 2

您可以使用一些JavaScript执行多个部分更新。看看这个：

http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh

基于xpages中之前的组合框选择隐藏？

2 个答案: