javascript - （Javascript）如何将倒数计时器添加到选择选项

Question

我想在选择选项中添加倒数计时器。这是一段 html 代码：

<select id="patientSelect">
<option> Heart Attack, 65, ETA: <span id="timer"></span></option>
</select>

和javascript：

$(document).ready(function(){
var count=30;
var counter=setInterval(timer, 1000);

function timer(){
    count--;
    if(count <= 0){
        clearInterval(counter);
        return;
    }
    document.getElementById("timer").innerHTML=count + " secs";
}
});

但它只有在我将 id 放在选项标签中时才会显示（这也会删除所有当前的 html）。任何帮助表示赞赏。:-)

编辑：完美，谢谢大家！

Answer 1

尝试这个

HTML

<select id="patientSelect">
<option id="timer">Heart Attack, 65, ETA: 30 secs</option>
</select>

JAVASCRIPT

$(document).ready(function(){
var count=30;
var counter=setInterval(timer, 1000);

function timer(){
    count--;
    if(count <= 0){
        clearInterval(counter);
        return;
    }
    document.getElementById("timer").innerHTML= "Heart Attack, 65, ETA: " + (count.toString()) + " secs";
}
});

Answer 2

那是因为您的标记无效，option元素不能有子元素，您可以option使用 JavaScript 选择并添加原始字符串：

document.getElementById("timer").innerHTML = 'Heart Attack, 65, ETA:' +  count + " secs";