用JavaScript实现在一个文本框里的文字随着一个下拉列表选项,点击选项后显示不同的颜色。
时间: 2024-04-30 09:17:12 浏览: 55
您好,根据您的要求,我为您提供以下的JavaScript实现代码:
HTML代码:
```
<select id="colorList" onchange="changeColor()">
<option value="">--请选择颜色--</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<input type="text" id="text" style="font-size:18px" value="这是一个文本框" readonly>
```
JavaScript代码:
```
function changeColor() {
var colorList = document.getElementById("colorList");
var text = document.getElementById("text");
var selectedColor = colorList.value;
switch (selectedColor) {
case "red":
text.style.color = "red";
break;
case "blue":
text.style.color = "blue";
break;
case "green":
text.style.color = "green";
break;
default:
text.style.color = "black";
break;
}
}
```
以上代码实现了在一个下拉列表中选择不同颜色,文本框的文字会随之进行颜色变化。当下拉列表未选中时,文本颜色为黑色。希望可以对您有所帮助。
阅读全文