javascript - 根据下拉选择动态更改内容

Question

这是我的下拉菜单。

<select id="q-rank">
    <option value="1">Rank 1</option>
    <option value="2">Rank 2</option>
    <option value="3">Rank 3</option>
    <option value="4">Rank 4</option>
    <option value="5">Rank 5</option>
</select>

span 标签中的值是我想要更改的值。

<span id="q-cd">16</span>
<span id="q-stats1">70</span>

这是我的 JavaScript。

var qSelect = document.getElementById("q-rank");
var qCD = document.getElementById("q-cd");
var qStats1 = document.getElementById("q-stats1");

if(qSelect.value == "1"){
    qCD.innerHTML = "worked";
    qStats1.innerHTML = "70";
}

if(qSelect.value == "2"){
    qCD.innerHTML = "15";
    qStats1.innerHTML = "115";
}

if(qSelect.value == "3"){
    qCD.innerHTML = "14";
    qStats1.innerHTML = "160";
}

最初，当页面加载时，第一个 if 语句起作用。例如，如果我将第一个 if 语句的 innerHTML 更改为“test”之类的内容，则当我加载页面时，span 标记中的值为“test”。但是，通过选择“rank 2”，它不会更改 span 标记的内部 HTML。

我希望使用纯 Javascript 来完成此任务，但欢迎使用 Jquery。

Answer 1

您的代码工作正常，只需添加 eventListener，每次更改 select 的 dropdown 值时，它都会调用更改，如下所示。

   var qSelect = document.getElementById("q-rank");
function clck(){
var qCD = document.getElementById("q-cd");
var qStats1 = document.getElementById("q-stats1");

if(qSelect.value == "1"){
qCD.innerHTML = "worked";
qStats1.innerHTML = "70";
}

if(qSelect.value == "2"){
qCD.innerHTML = "15";
qStats1.innerHTML = "115";
}

if(qSelect.value == "3"){
qCD.innerHTML = "14";
qStats1.innerHTML = "160";
}
}
qSelect.addEventListener('change',clck);

<select id="q-rank">
    <option value="1">Rank 1</option>
    <option value="2">Rank 2</option>
    <option value="3">Rank 3</option>
    <option value="4">Rank 4</option>
    <option value="5">Rank 5</option>
</select>

<span id="q-cd">16</span>
<span id="q-stats1">70</span>