Show specific options in dropdown

Change option available in dropdwon based on radio button selected. This is working only in Chrome and IE. I don't know about IE9, but it is not working in IE8. (Customer uses IE8, so)

by Animesh B40

HTML

<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>

CSS

#step1 {
    padding: 15px;
    margin:15px;
}

JavaScript

$('.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).prop("selected", true);
        else $(this).hide();

    });
});