Rendered on selectlist not unrendering when a value is selected

Question

I have a problem that I really can't seem to understand.

I have a custom Page that has 2 sections. In the first section I select the type of information wanted, and on the second section I display a list of that kind of information.

For one specific kind of information, I want to put a select list in order to filter the information on the year it was created.

So basically, on that second section I have a select list rendered only if the type of information is the one that this select list was created for, and a list of information.

Before I put my selectlist, everything was working fine. But somehow, after adding it, once I display the select list once, this section of the page stays the same. If I go back and move to another type of information, the old information and the select list will still be displayed.

Even more confusing, if in my select list I have the selectOption('','') and this one is selected, then it works correctly... I can move to a new information and the new information will be displayed, and not the selectlist.

I was wondering if anyone had encounter this kind of problem before, and how he solved it.

Here is the problematic part of my code :

    <div class="section-body ranking-list-section-body">

      <apex:outputPanel id="pnlRankingDetail">

      <apex:selectList value="{!rankingYear}" style="width: 100%;}" size="1" rendered="{!isViewType}">
          <apex:selectOptions value="{!rankingYears}"></apex:selectOptions>
      </apex:selectList>

      <!-- #DynamicItem -->
      <ol class="ranking-list" style="{!IF(currentRankingType!=typeUserCst, '', 'display: none;')}">

          <apex:repeat value="{!lsRankingResults}" var="res">

            <li class="{!res.resPositionClsNm}">

                <div onClick="location.href='{!res.resURL}'">
                    <table>
                        <tr>
                            <td class="rankingDataValue"><span class="ellipsedSpan">{!res.resCategory}</span></td>
                        </tr>
                        <tr>
                            <td class="rankingDataValue"><span class="ellipsedSpan">{!res.resName}</span></td>
                        </tr>

---

I also tried using :

<apex:outputPanel style="{!IF(isViewType,'','display:none;')}">
    <apex:selectList value="{!rankingYear}" style="width: 100%;" size="1" >
        <apex:selectOptions value="{!rankingYears}"> </apex:selectOptions>
    </apex:selectList>
</apex:outputPanel>

<!-- #DynamicItem
    <ol class="ranking-list" style="{!IF(currentRankingType=typeViewsCst, '', 'display: none;')}">
        <apex:repeat value="{!lsRankingResults}" var="res">
            <li class="{!res.resPositionClsNm}">

But then, even though, this outputpanel is not related to the list of item bellow, the list end up not being displayed anymore (The selectList is not displayed also). And it's not just a CSS problem since when I inspect the page I don't see any value in the list.

Answer 1

Use Outputpanel for showing Selectlist condition wise.

modify selectlist like below-

<apex:outputPanel rendered="{!isViewType}">
    <apex:selectList value="{!rankingYear}" style="width: 100%;}" size="1">
       <apex:selectOptions value="{!rankingYears}"></apex:selectOptions>
    </apex:selectList>
</apex:outputPanel>