jQuery: filtering dropdown still showing the first element after the filtering

jQuery: filtering dropdown still showing the first element after the
filtering

I am trying to filter dropdown options based on the radiobutton selected.
The filtering is happening just fine, but the problem is, after the
filtering happens, the first element is still being shown.
Check the demo: http://jsfiddle.net/animeshb/7Wqfj/
<div id="step1">
<input class="radiobutton" dataval="PAT" name="TemplateTypes"
type="radio" />
<div>Patient</div>
<input class="radiobutton" dataval="EMPLOYEE" name="TemplateTypes"
type="radio" />
<div>Employee</div>
<input class="radiobutton" dataval="MACHINE" name="TemplateTypes"
type="radio" />
<div>Machine</div>
<select class="selectLDlist" id="ddlAllTemplates" name="AllTemplates">
<option
value="77492|ET_07|EMPLOYEE|08/16/13|08/16/14|Approved|Y|70744">EMPLOYEE</option>
<option
value="70470|testing|PAT|08/16/13|08/16/14|Approved|Y|70428">Patient</option>
<option
value="70472|testing|PAT|08/12/13|08/16/14|Approved|Y|30213">Patient</option>
<option
value="70472|testing|EMPLOYEE|08/13/13|08/16/14|Approved|Y|30213">EMPLOYEE</option>
<option
value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Patient</option>
<option
value="70472|testing|MACHINE|08/14/13|08/16/14|Approved|Y|30213">MACHINE</option>
<option
value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Patient</option>
</select>
</div>
and the jQuery:
$('.radiobutton').change(function () {
var templateType = $("#step1
input:radio[class=radiobutton]:checked").attr("dataval");
var ddlAllTemplates = $('#ddlAllTemplates');
var options = ddlAllTemplates.find('option');
$('#ddlAllTemplates option').each(function () {
var extract = $(this).attr('value').split('|')[2];
if (extract == templateType) $(this).show();
else $(this).hide();
});
});