How can I hide/show a text field based upon a multi-picklist value?

Question

I would like to do this by replicating the Contact page in Visualforce and then overriding the original Contact layout with the Visualforce page, which would include the code to make hiding/showing the text field based on the correct multi-picklist option being selected, possible.

I'd make use of Record Types, but that would mean the user having to save to make the text field appear. I'm interested in making the text field appear as soon as the user selects the option, "Other", on the multi picklist.

Here's what I have so far (thanks to @Ashwani):

<apex:page standardController="Contact">

   <apex:form >

      <apex:detail />

      <apex:inputfield value="{!multi-picklist}">

          <apex:actionSupport event="onchange" reRender="Form" />
     </apex:inputfield>

     <apex:outputpanel id="Form">
        <apex:inputtext value="{! TextField}" rendered="{!multi-picklist == 'Other'}" />
     </apex:outputpanel>
  </apex:form>

</apex:page>

The problem is that while this does cause the multi-picklist to appear on the screen, "Other" (the multi-picklist value which should control the visibility of the text field) is absent from the multi-picklist.

I'm going to keep working to find out what's wrong, and will post an answer if I do figure it out myself. In the meantime, if anyone can see any obvious mistakes, please post an answer or comment.

Answer 1

There are some basic errors in visualforce. Your page should look like this:

<apex:page standardController="Contact">

   <apex:form >

      <apex:detail />
      <!-- bind correct value here. It must be sObject -->
      <apex:inputfield value="{!multi-picklist}">
          <!-- on change event -->
          <apex:actionSupport event="onchange" reRender="panelID" />
     </apex:inputfield>

     <!-- This panel will be re-rendered on change -->
     <apex:outputpanel id="panelID">
        <apex:inputtext value="{! TextField}" rendered="{!multi-picklist == 'Other'}" />
     </apex:outputpanel>
  </apex:form>

</apex:page>

Few things:-
- <actionsupport/> tag event attribute was wrong.
- rerender attribute must be Id of element you want to refresh/rerender it can not be entire tag name.
- It is good rerender parent element instead of exact element because exact element may not be available based on rerender condition.
- In inputfield tag rerender and value attribute value was interchanged.
- inputfield can only bind with Sobject class instance.