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

Here is a fiddle延迟2秒。

在第一个菜单中输入应答后，第二个菜单延迟显示

1 个答案: