0

我需要出现第二个菜单，由第一个菜单中选择的答案提示。第二个菜单按预期显示，但出现得太快（因为它出现在第一个菜单下拉链接在选择后消失之前）。有些人没有注意到第二个菜单已经出现。如果可能的话，我想延迟第二个菜单的出现，也许延迟 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>
4

1 回答 1

0

setTimeout() 将延迟您想要延迟的任何功能。

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

}

请注意第二个参数 - “1000” - 是在第一个参数中的代码运行之前经过的毫秒数。 文档在这里

这是一个延迟 2 秒的小提琴。

于 2013-05-12T23:49:14.037 回答