How to create onChange event to display separate HTML select tag? : <p>I have question on onChange event. </p>

<p>I have these HTML code</p>

<p><strong>code.html</strong></p>

<pre><code>&lt;label&gt;Morning&lt;/label&gt;
&lt;select name="timeA" required=""&gt;
    &lt;option value=""&gt;Select Time From&lt;/option&gt;
    &lt;option value="0800"&gt;8:00 AM&lt;/option&gt;
    &lt;option value="0900"&gt;9:00 AM&lt;/option&gt;
    &lt;option value="1000"&gt;10:00 AM&lt;/option&gt;
    &lt;option value="1100"&gt;11:00 AM&lt;/option&gt;
&lt;/select&gt;

&lt;label&gt;Afternoon&lt;/label&gt;
&lt;select name="timeB" required=""&gt;
    &lt;option value=""&gt;Select Time From&lt;/option&gt;
    &lt;option value="1200"&gt;12:00 PM&lt;/option&gt;
    &lt;option value="1300"&gt;1:00 PM&lt;/option&gt;
    &lt;option value="1400"&gt;2:00 PM&lt;/option&gt;
    &lt;option value="1500"&gt;3:00 PM&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>My goal is to allow user to select between morning or afternoon using radio button or other alternative. </p>

<p>if the user select radiobutton morning, only select "timeA" shows and "timeB" will hidden.  </p>

<p>if the user select radiobutton afternoon, only select "timeB" shows and "timeA" will hidden. </p>

<p>Please help me. thanks. </p>
