cainam29 Posted August 26, 2013 Share Posted August 26, 2013 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. Link to comment https://forums.phpfreaks.com/topic/281564-radio-buttondrop-down-not-working-properly-in-ie/ Share on other sites More sharing options...
nogray Posted August 27, 2013 Share Posted August 27, 2013 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. Link to comment https://forums.phpfreaks.com/topic/281564-radio-buttondrop-down-not-working-properly-in-ie/#findComment-1447043 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.