在第一个菜单中输入答案后，第二个菜单出现延迟

Question

我需要出现第二个菜单，由第一个菜单中选择的答案提示。第二个菜单按预期显示，但是它出现得太快(因为它出现在第一个菜单下拉链接之前，在选择之后消失)。有些人没有注意到第二个菜单已经出现了。我想推迟第二个菜单的出现，如果可能的话，可能会推迟1秒。有人能帮上忙吗？到目前为止，我将粘贴以下内容的一个非常精简的版本：

<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 to 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 to Select Your 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 to Select Your 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>

Answer 1

setTimeout()将延迟您想要延迟的任何函数。

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

}

请注意，第二个参数"1000“是在运行第一个参数中的代码之前所经过的毫秒数。Documentation here

延迟2秒的Here is a fiddle。