BuildMyWeb Posted June 1, 2012 Share Posted June 1, 2012 i have the following script on a site im working on. what it does: The Subcategory field is invisible by CSS default. once a Category is chosen (onchange event), the Subcategory field is visible and the appropriate <option>'s are written. the problem: works fine in FF for me. IE9 the subcategory field is visible but the options are not there. its a blank drop-down. i looked at all of my privacy and security settings but cant find a fix there. anyone have a clue? am i explaining things well enough? // loads all functions into browser once window/page loads window.onload = init_all; function init_all() { if( !document.getElementById ) return; var obj_cat = document.getElementById("job_category"); var obj_subcat = document.getElementById("job_subcat"); var obj_subcat_txt = document.getElementById("subcat_txt"); var obj_subcat_input= document.getElementById("subcat_input"); obj_cat.onchange = check_value; function check_value() { var cat_value = obj_cat.value; if( cat_value != "" ) { obj_subcat_txt.style.visibility = "visible"; obj_subcat_input.style.visibility = "visible"; } obj_subcat.innerHTML = "<option value=''></option>"; switch( cat_value ) { case"dermats": obj_subcat.innerHTML += "<option value='general'>General</option><option value='mohs'>Mohs and Procedural</option><option value='peds'>Pediatric</option><option value='derm_patho'>Dermatopathologist</option>"; break; case"techs": obj_subcat.innerHTML += "<option value='mohs_tech'>Mohs Tech</option><option value='lab_tech'>Lab Tech</option><option value='laser_tech'>Laser Operator</option><option value='other_tech'>Other Tech</option>"; break; case"mlp": obj_subcat.innerHTML += "<option value='derm_pa'>Derm. Physician's Assistant</option><option value='derm_nurse'>Derm. Nurse Practitioner</option>"; break; case"support": obj_subcat.innerHTML += "<option value='support_ma'>Medical Assistant</option><option value='support_rn'>Registered Nurse</option><option value='support_coord'>Patient Coordinator</option>"; break; case"office": obj_subcat.innerHTML += "<option value='off_recep'>Receptionist</option><option value='off_billing'>Billing and Coding</option><option value='off_mgr'>Office Manager</option>"; break; case"esthetics": obj_subcat.innerHTML += "<option value='esth_esth'>Esthetician</option>"; break; default: obj_subcat_txt.style.visibility = "hidden"; obj_subcat_input.style.visibility = "hidden"; break; } // close switch( cat_value ) } // close function check_value() } HTML: <!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> ... <link rel="stylesheet" type="text/css" href="bmw_dj.css" /> <script type='text/javascript' src='scripts/post_jobs.js'></script></head> <body id="page_post_jobs"> <div id="wrapper"> <div id="banner"> <a href='index.php'>Home</a> <a href='profile.php'>Profile</a> <a href='messages.php'>Messages</a> </div> <!-- close banner --> <div id="sub_banner"> <span style='margin-left:30px;'>Welcome, <a href='profile.php' style='margin-left:0px;'>User</a></span><a href='logout.php'>Logout</a></div> <!-- close sub_banner --> <div id="main"> <div id="col_left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </div> <!-- close col_left --> <div id="col_mid_home"> <h1>POST A JOB</h1> <form action="scripts/handler_jobs.php" method="post" id="form_post_job"> <p class='msg_field'> </p> <div class='post_job_txt'><b>* Job Titles:</b> </div> <div class='post_job_input'><input type='text' maxlength='15' name='job_title' value="" /></div> <div class='post_job_txt'><b>Company:</b> </div> <div class='post_job_input'><input type='text' name='company' value="" /></div> <div class='post_job_txt'><b>* Salary Range:</b> </div> <div class='post_job_input'> <select name='salary'> <option value=''></option><option value='30000'>$30,000+</option><option value='50000'>$50,000+</option><option value='70000'>$70,000+</option><option value='90000'>$90,000+</option><option value='110000'>$110,000+</option> </select> </div> <div class="new_line"></div> <div class='post_job_txt'><b>* Job Type:</b> </div> <div class='post_job_input'> <select name='job_type'> <option value=''></option><option value='full'>Full-time</option><option value='part'>Part-time</option><option value='contract'>Contract</option><option value='temp'>Temporary</option> </select> </div> <div class="new_line"></div> <!-- ################### START OF PROBLEM AREA ######################## --> <div class='post_job_txt'><b>* Job Category:</b> </div> <div class='post_job_input'> <select name='category' id="job_category"> <option value=''></option><option value='dermats'>Dermatologists</option><option value='techs'>Technicians</option><option value='mlp'>Mid-Level Providers</option><option value='support'>Clinical Support</option><option value='office'>Office Staff</option><option value='esthetics'>Esthetics</option><option value='other'>Other</option> </select> </div> <div class="new_line"></div> <div class='post_job_txt' id="subcat_txt"><b>* Subcategory:</b> </div> <div class='post_job_input' id="subcat_input"> <select name='subcat' id="job_subcat"> </select> </div> <!-- ################### END OF PROBLEM AREA ######################## --> <div class='post_job_txt'><b>City:</b> </div> <div class='post_job_input'><input type='text' name='city' value="" /></div> <div class='post_job_txt'><b>State:</b> </div> <div class='post_job_input'> <select name='state'> <option value=""></option> <option value='AL'>Alabama</option><option value='AK'>Alaska</option>...</option> </select> </div> <div class='post_job_txt'><b>* Zip:</b> </div> <div class='post_job_input'><input type='text' name='zip' maxlength="5" value="" /></div> <div class='vert_spacer' style='float:left; height:50px; width:800px;'></div> <!-- SUBMIT --> <div style="clear:both;"><input type='submit' name='submit_button' value='Post Job' /></div> </form> </div> <!-- close col_mid_home --> <div id="col_right_home"> <h2>SPONSORED LINKS</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </div> <!-- close col_right_home --> </div> <!-- close main --> <div id="footer"> ... </div> <!-- close footer --> </div> <!-- close wrapper --> </body> </html> Link to comment https://forums.phpfreaks.com/topic/263487-issue-with-visibility-and-innerhtml-not-working-ie9/ Share on other sites More sharing options...
nogray Posted June 1, 2012 Share Posted June 1, 2012 If you want to use innerHTML for a select menu in IE, you would need to write the whole select tag and populate the div innerHTML e.g. var html = '<select><option>Hello in IE</option></select>'; document.getElementById('my_div').innerHTML = html; Otherwise, you would need to create the options as elements (e.g. using document.createElement) and append them to the select menu. Link to comment https://forums.phpfreaks.com/topic/263487-issue-with-visibility-and-innerhtml-not-working-ie9/#findComment-1350423 Share on other sites More sharing options...
BuildMyWeb Posted June 15, 2012 Author Share Posted June 15, 2012 i was offered the following in another community. seemed to work well for me. thank you for the input nogray. You can set options on the fly like this: document.myForm.mySelect.options[0]=new Option("foo", "somevalue", true, false) document.myform.master.options[1]=new Option("bar", "someothervalue", false, false) With parameters: text, value, defaultSelected, selected Link to comment https://forums.phpfreaks.com/topic/263487-issue-with-visibility-and-innerhtml-not-working-ie9/#findComment-1354252 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.