source: main/waeup.kofa/trunk/src/waeup/kofa/students/browser_templates/onlinepaymentaddform.pt

<form action="." tal:attributes="action request/URL" method="post"
      enctype="multipart/form-data" i18n:domain="waeup.kofa">

  <table class="form-table">
    <tbody>
      <tr>
        <td i18n:translate="" class="fieldname">
          Payment Category:
        </td>
        <td>
          <select id="form.p_category" name="form.p_category" size="1"
                  class="form-control half" onclick="further()">
            <option tal:repeat="item view/selectable_categories"
                    tal:attributes="value python:item[0]">
              <span tal:replace="python:item[1]">FEE CATEGORY</span>
            </option>
          </select>
        </td>
      </tr>
      <tr tal:condition="view/selectable_payment_options">
        <td i18n:translate="" class="fieldname">
          Payment Option:
        </td>
        <td>
          <select id="form.p_option" name="form.p_option" size="1"
                  class="form-control half" onclick="further()">
            <option tal:repeat="item view/selectable_payment_options"
                    tal:attributes="value python:item[0]">
              <span tal:replace="python:item[1]">PAYMENT OPTION</span>
            </option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>

  <table id="widgets" class="form-table" style="display: none;">
    <tbody>
      <tal:widgets content="structure provider:widgets" />
    </tbody>
  </table>

  <span id="p_item" style="display: none;">
  <table class="form-table">
    <tbody>
      <tr>
        <td i18n:translate="" class="fieldname">
          Desired Course of Study:
        </td>
        <td>
          <input class="textType" id="new_programme" name="new_programme"
            type="text">
        </td>
      </tr>
    </tbody>
  </table>
  </span>

  <br />

  <div tal:condition="view/availableActions">
    <input tal:repeat="action view/actions"
           tal:replace="structure action/render"
           />
  </div>
</form>

<script type="text/javascript">
  function further() {
      if (document.getElementById('form.p_category').value == 'transfer') {
          document.getElementById('p_item').style.display = 'block';
      } else {
          document.getElementById('p_item').style.display = 'none';
      }
      if (document.getElementById('form.p_category').value == 'combi') {
          document.getElementById('widgets').style.display = 'block';
      } else {
          document.getElementById('widgets').style.display = 'none';
      }
  }
</script>