javascript - Delayed appearance of 2nd menu, after answer is entered in first menu -


i needed secend menu appear, prompted answer selected in first menu. second menu appears supposed to, appears (as appears before first menu dropdown links disappear after selection). people don't notice second menu has appeared. delay appearance of second menu, if possible, maybe 1 second. can help? paste condensed version of have far below:

<div align="center"><font color="#000080" size="6"><strong>step 1</strong></font> <form>     <select style="background-color: #f81414; font-family: 'arial'; color: #ffffff; font-size: 15pt; font-weight: bold" id="opts" onchange = "showform()">     <option value="0" selected="selected">click here select brand</option>     <option value="1">bissell</option>     <option value="2">hoover</option>     </select> </form> <br /> <div style="display: none" id="f1" align="center"><font color="#000080" size="6"><strong>step 2</strong></font><br /> <form name="form1">     <select style="background-color: #f81414; font-family: 'arial'; color: #ffffff; font-size: 14pt; font-weight: bold" onchange="location=this.options[this.selectedindex].value;">     <option value="0" selected="selected">click select bissell model</option>     <option value="9400-proheat-2x-select-pet-deep-cleaning-series.html">bissell 9400 2x deep cleaner parts</option>     <option value="9500-bissell-proheat-2x-.html">bissell 9400 2x deep cleaner parts</option>     </select> </form> </div> <div style="display: none" id="f2" align="center"><font color="#000080" size="6"><strong>step 2</strong></font><br /> <form name="form2">     <select style="background-color: #f81414; font-family: 'arial'; color: #ffffff; font-size: 14pt; font-weight: bold" onchange="location=this.options[this.selectedindex].value;">     <option value="0" selected="selected">click select hoover model</option>     <option value="hoover-7069-conquest.html">hoover u7069 conquest deep cleaner</option>     <option value="hoover-8055-conquest.html">hoover u8055 conquest deep cleaner</option>     </select> </form> </div> <script type = "text/javascript"> function showform(){ var selopt = document.getelementbyid("opts").value; if (selopt == 1) { document.getelementbyid("f1").style.display="block"; document.getelementbyid("f2").style.display="none"; } if (selopt == 2) { document.getelementbyid("f1").style.display="none"; document.getelementbyid("f2").style.display="block"; } }  </script> </div> 

a settimeout() place delay on whatever function delay.

if (selopt == 1) { settimeout(function(){ document.getelementbyid("f1").style.display="block"; document.getelementbyid("f2").style.display="none";}, 1000); 

}

notice second parameter - "1000" - number of milliseconds elapse before code in first parameter run. documentation here

here fiddle 2 second delay.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -