How to add a drop down in a UI page, and based on choice selected fields should be changed on UI page.

How to add a drop down in UI page with the following choices 1. comments 2. work notes

In UI page if comments is selected only comments should be printed and when work notes is selected work notes should be printed.

Code for UI page: 

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var = "jvar_id" expression="RP.getWindowProperties().get('id')"/>
<j:set var="jvar_change_id" value="${sysparm_change}" />
<h1>Support Ticket Summary</h1>
<div style="height: 40px;" class="print_hide" align="right">
<button type="submit" onclick="javascript: window.top.print();">
<img src="images/printer.gifx"></img>
<span>Click to Print</span>
</button>
</div>

<g2:evaluate var="jvar_inc" object="true">
var sup = new GlideRecord('u_support_management');
sup.get('${jvar_change_id}');
sup;
</g2:evaluate>

<table border="1" width="100%">

<style>
td{
font-size:16px;
padding-bottom:10px;
padding-top:10px;
}
.td1{
text-align: left;
padding-left:5px;
}
.td2{
width:150px;
font-weight:bold;
}
.td3{
width:600px;
}
tr{
margin-top:10px !important;
}
.td4{
color:blue;
}
</style>

<tr><td class="td1 td2 td4" >Number:</td></tr>
<tr><td class="td1 td3" >$[sup.number]</td></tr>

<tr><td class="td1 td2 td4">Title:</td></tr>
<tr><td class="td1 td3" > $[sup.short_description]</td></tr>

<tr><td class="td1 td2 td4" >State:</td></tr>
<tr><td class="td1 td3">$[sup.state.getDisplayValue()]</td></tr>

<tr><td class="td1 td2 td4" style="text-align:top;">Comments:</td></tr>
<tr><td class="td1 td3" style="white-space:pre-line">$[sup.u_comments.getDisplayValue()] </td></tr>

<tr><td class="td1 td2 td4" style="text-align:top;">Work Notes:</td></tr>
<tr><td class="td1 td3" style="white-space:pre-line">$[sup.work_notes.getDisplayValue()] </td></tr>

</table>
</j:jelly>