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
Post a Comment