How to only show the panels selected from a drop-down and keep the rest of the panels hidden?

[garinapavan]

I have 3 panels in 3 rows in a form and based on my choice it need to show the panels based on the choice . in the xml i posted .. based on <choice value="server1*">ABC</choice> , it has to show panel 1 and panel 3 and need to hide panel 2 in the below example and based on <choice value="server2">EFG</choice>, it has to show only panel 2 and need to hide panel 1 and 3. Any help is appreciated ! .

here is my form

<form>
  <label>ware</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
     <input type="dropdown" token="prod_system" searchWhenChanged="true">
     <label>System</label>
      <default>miasoa*p*</default>
      <choice value="server1*">ABC</choice>
      <choice value="server2">EFG</choice>
     </input>

  </fieldset>
  <row>
    <panel>
      <chart>
        <title>ABC Request Count</title>
        <search>
          <query>host=$prod_system$ source="/access.log*"  | timechart span=1hr count by host</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">right</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart">bar</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      </chart>
    </panel>
 </row>
  <row>
    <panel>
      <chart>
        <title>EFG Request Count</title>
        <search>
          <query>host=$prod_system$ source="*OSB_MS*/logs/access.log" | timechart span=1hr count by host</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">false</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">bar</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <title>ABC Service Response Time</title>
        <search>
          <query>host=$prod_system$ source="/access.log*"  | timechart avg(duration) by host</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.legend.placement">right</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart">line</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      </chart>
    </panel>
    </row>
</form>

[sundareshr]

You can use token values to conditionally show or hide user interface components. The following elements contain the attributes depends and rejects. Use the and elements to set the token values that these attributes consume.

http://docs.splunk.com/Documentation/Splunk/6.4.0/Viz/tokens