internet explorer - IE9 jquery show/hide in drop down list fails -


i have web page uses drop down list, dynamically changes based on actions on page. works great in firefox , chrome, fails in internet explorer.

i found multiple entries similar issues, , refer problems in html syntax. checked complete syntax of page, troublesome because page partly client side generated javascript. however, can not find html syntax issues.

i decided make small test page small script focus on specific part. page has exact same behavior. in firefox hide/show of drop down list works normally, while fails in ie9. included alerts confirm event passed script, case. show , hide fails on drop down entries. on other elements in page not have issue hide , show functions.

when check in ie's developer tool (f12 developer tools), can see display attribute set. list items remain visible.

how can show , hide work drop down lists in ie9?

the page code:

<!doctype html> <html> <head>     <title>test</title>     <meta content="text/html; charset=utf-8" http-equiv="content-type">     <script type="text/javascript" src="jquery-1.10.2.min.js"></script>     <script type="text/javascript" src="script.js"></script> </head> <body>     <h1>test</h1>      <select id="list">         <option value="volvo">volvo</option>         <option value="saab">saab</option>         <option value="mercedes">mercedes</option>         <option value="audi">audi</option>     </select>      <input id="hide" type="button" value="hide">     <input id="show" type="button" value="show">      <p id="text">test see if can hidden.</p> </body> </html> 

the script.js code:

function sethidehandler(state) {     if (state)     {         $("#hide").on("click", function(event) {             hidelist();         });     }     else     {         $("#hide").off();     } }  function setshowhandler(state) {     if (state)     {         $("#show").on("click", function(event) {             showlist();         });     }     else     {         $("#show").off();     } }  function hidelist() {     $("#list option").each(function() {         var name = $(this).text();         alert("hiding: " + name);         $(this).hide();     });     $("#text").hide(); }  function showlist() {     alert("show");     $("#list option").each(function() {         var name = $(this).text();         alert("showing: " + name);         $(this).show();     });     $("#text").show(); }  $(document).ready(function() {     sethidehandler(true);     setshowhandler(true); }); 


Comments

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

javascript - addthis share facebook and google+ url -