radio button/drop down not working properly in IE

[cainam29]

my code below works perfect in Mozilla and Chrome but not in IE8, when i select a Radio button in IE its showing other options for other Radio button, need help in fixing the issue in IE8

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="infratool.js"></script>

<script>
$(function() {

    $("#submit").hide();

    $("#Category").change(function() {
        window.location = $(this).val().split(" ")[0];
    if(loc)
        window.location.href = loc;
    })

});
</script>

<table width="392" border="0">
<td colspan="2" align="center"><form id="form1" name="form1" method="post" action="">
<tr>
<td align="center">
<label><input name="Radio1" type="radio" id="TestA" value="TestA" onclick="showSelect();" />TestA</label>
<label><input name="Radio1" type="radio" id="TestB" value="TestB" onclick="showSelect();" />TestB</label>
</td>
</tr>
</form>
<div id="div-id" align="center"><select name="Category" id="Category" class="hide">
<option value=" TestA TestB" selected="selected">--</option>
<option value="TestA1.php TestA">TestA1</option>
<option value="TestA2.php TestA">TestA2</option>
<option value="TestA3.php TestA">TestA3</option>
<option value="TestA4.php TestA">TestA4</option>
<option value="TestA5.php TestA">TestA5</option>
<option value="TestB1.php TestB">TestB1</option>
<option value="TestB2.php TestB">TestB2</option>
<option value="TestB3.php TestB">TestB3</option>
<option value="TestB4.php TestB">TestB4</option>
<option value="TestB5.php TestB">TestB5</option>
<option value="TestB6.php TestB">TestB6</option>
</select><input type="submit" value="Go" id="submit"/>
</div>
</table>

here are the other java scripts ive been using

//Show Select option after clicking Radio button:

function showSelect() {
                var select = document.getElementById('Category');
                select.className = 'show';
            }
//Select option, separates the link from Class

$(function(){

    var select = $('#Category'),
        options = select.find('option');

    $('[type="radio"]').click(function(){
        var visibleItems = options.filter('[value*="' + $(this).val()  + '"]').show();
        options.not(visibleItems).hide();

        if(visibleItems.length > 0)
        {
            select.val(visibleItems.eq(0).val());
        }
    });
});

$(function() {

    $("#submit").hide();

    $("#Category").change(function() {
        window.location = $(this).val().split(" ")[0];
    if(loc)
        window.location.href = loc;
    })

});

and here is the screenshot in Firefox and IE8 respectively.

 

             

[nogray]

I don't think you can use "select" as a variable (or any html element name or id) since it will create a conflict in older IE browsers. Try var slct instead. Same thing goes with options.