我希望主体的背景颜色根据所选的选项值和textContent而改变。
select.addEventListener('input', function() {
for (let i = 0; i < select.length; i++) {
text = select.options[i].text;
value = select.options[i].value;
if (value == "Turquoise") {
body.style.backgroundColor = value;
} else if (text == "Sun Flower") {
body.style.backgroundColor = value;
} else if (text == "Pumpkin") {
body.style.backgroundColor = value;
} else if (text == "Alizarin") {
body.style.backgroundColor = value;
} else if (text == "Emerald") {
body.style.backgroundColor = value;
} else if (text == "Peter River") {
body.style.backgroundColor = value;
} else {
body.style.backgroundColor = "#bdc3c7";
}
}
});
问题是,当我选择一个选项时,通过检查最后一条else if
语句,背景颜色只会改变一次。我尝试使用input
和change event
,但没有任何变化。
options[i].value
包含十六进制颜色名称
发布于 2018-06-10 02:11:51
您不需要迭代所有的选项,您应该获得选定的选项并检索要分配给背景的值,然后使用change
事件进行选择下拉列表(请参阅下面的演示
var select = document.querySelector("#my-select");
var body = document.body;
select.addEventListener('change', function() {
var options = this.options;
var selectedOption = options[options.selectedIndex];
body.style.background = selectedOption.value;
});
<select id="my-select">
<option value="#add8e6">Blue</option>
<option value="#90ee90">Green</option>
<option value="#ffc0cb">Pink</option>
</select>
https://stackoverflow.com/questions/50777128
复制相似问题