java script/ jquery not working in IE

Question

I have some code which works perfectly in Firefox, but not in IE. The desired solution is that after a user selects a radio button, a dropdown would show up containing options related to the radio button category. However, currently when using IE, when a user selects a radio button it will show the drop down but would have all the options including the ones related to the radio button that is not selected

here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tools</title>

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

</head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header" style="background-color:#7BD12E">
<h1 align="Center" style="color:#FFF;"></h1>
<!-- end #header --></div>
<form id="form1" name="form1" method="post" action="">
<table width="392" border="0">
<tr>
<td align="center">
<label><input name="Radio1" type="radio" id="Radio1" value="Radio1" onclick="showSelect();" />Radio1</label>
<label><input name="Radio2" type="radio" id="Radio2" value="Radio2" onclick="showSelect();" />Radio2</label>
<input type="radio" name="Radio3" id="Radio3" value="Hidden" style="display:none" checked="checked" />
</td>
</tr>
<tr>
<td align="center">&nbsp;</td>
</tr>
</form>
<div id="div-id" align="center"><select name="Category" id="Category" class="hide">
<option value=" Radio1 Radio2" selected="selected">--</option>
<option value="1 Radio1">1</option>
<option value="2 Radio1">2</option>
<option value="3 Radio1">3</option>
<option value="4 Radio2">4</option>
<option value="5 Radio2">5</option>
<option value="6 Radio2">6Domain</option>
</select><input type="submit" value="Go" id="submit"/>
</div>
</table>
</div>
</body>
</html>

while here are my java scripts

//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;
})
});

I've tried to use the IE developer tools, but to no avail.

Split all your operations to the simple steps an use alert() message to debug. — NoWar
– NoWar, Commented Jul 23, 2013 at 17:25
...and please indent your code, and fix the title of your question to reflect a short summary of the issue. — user2437417
– user2437417, Commented Jul 23, 2013 at 17:26
Let's see. You're closing the table twice, and forgot to close a div, invalid markup! You're checking if (loc) {.. but what the frack is loc, you have no loc ? — adeneo
– adeneo, Commented Jul 23, 2013 at 17:33

Niet the Dark Absol · Accepted Answer · 2013-07-23 17:33:58Z

1

You can't just show/hide <option> elements. You have to actually remove them from the drop-down.

Personally I would suggest cloning the select box when the page loads, and then using that as a base to repopulate the re-filter the original dropdown.

answered Jul 23, 2013 at 17:33

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jnatalzia · Accepted Answer · 2013-07-23 17:44:45Z

0

IE will not just let you hide options.

Perhaps you could instead disable the option using:

.prop('disabled', true);

edited Jul 23, 2013 at 17:44

Jnatalzia

1,6878 silver badges14 bronze badges

answered Jul 23, 2013 at 17:35

Barry Tormey

3,1665 gold badges38 silver badges56 bronze badges

1 Comment

joe Devance Over a year ago

@Jnatalzia can u tell me where to put this .prop('disabled', true); are u telling me to replace options.not(visibleItems).hide();

Collectives™ on Stack Overflow

java script/ jquery not working in IE

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related