使用选择/选项更改文本颜色
[英]Change text color with Select/Option
问题描述
I'm trying to change a text color, using the Select object, trying to get the color I selected and setting it to the text. 
我正在尝试使用Select对象更改文本颜色，尝试获取我选择的颜色并将其设置为文本。 There are two functions commented on my script, both were my attempts to get it done, but failed. 我的脚本中注释了两个函数，它们都是我试图完成的函数，但是都失败了。 Not asking for a complete answer/code, just want to know what is wrong. 不要求完整的答案/代码，只是想知道出什么问题了。 This is the code and thanks for your time: 这是代码，感谢您的宝贵时间：
<!DOCTYPE HTML>
<html>
<head>
<title>Hola Mundo Controles</title>
<meta name="author" content="José Del Valle Cordero"/>
<meta charset="utf-8" />
</head>
<body>
<div class="main">
<div class="subject" id="subject">
<span id="salute">¡Hello!</span>
</div>
<div id="control">
<div class="color_option">
Color:
<select name="color_list" id="colors" >
<option value="cl_option1" checked="checked">Red </option>
<option value="cl_option2">Blue </option>
<option value="cl_option3">Yellow </option>
<option value="cl_option4">Black </option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
var item,cl;
var colorsMap = {
'cl_option1' : "red",
'cl_option2' : "blue",
'cl_option3' : "yellow",
'cl_option4' : "black"
};
/*colors.onchange=function() {
var salute = document.getElementById("salute");
var item = document.getElementById("colors").selectedIndex;
var color = colorsMap[item];
salute.style.color = color;
};*/
/*$('#colors').change(function(){
var salute = document.getElementById("salute");
item=$(this).val();
cl = colorsMap[item];
salute.style.color = cl;
});*/
</script>
</body>
4 个解决方案
解决方案1
1 2014-02-24 03:41:27
You're close. 你近了 Include jQuery in <head> : 在<head>包含jQuery：
<script src="//code.jquery.com/jquery-latest.js"></script>
Then in your JS: 然后在您的JS中：
<script type="text/javascript">
var colorsMap = {
'cl_option1' : "red",
'cl_option2' : "blue",
'cl_option3' : "yellow",
'cl_option4' : "black"
};
$('#colors').change(function(){
$("#salute").css('color', colorsMap[$(this).val()]);
});
</script>
The original script is too clumsy & mixing up non-jQuery & jQuery functions. 原始脚本太笨拙，无法混合使用非jQuery和jQuery函数。
解决方案2
1 2014-02-24 03:46:33
The biggest issue I see, besides your lack of jQuery being included in the page, is your js is being executed right away. 除了页面中缺少jQuery外，我看到的最大问题是您的js立即被执行。 Both of your attempts use js to talk to the DOM where those html nodes are, however, the DOM my not be ready with those nodes when your scripts are running. 您的两次尝试都使用js与这些html节点所在的DOM进行通信，但是，当您的脚本运行时，DOM可能不准备使用那些节点。
jQuery offers a way to do this with a single line, if you prefer to go that route. jQuery提供了一种方法，只需一行就可以完成此操作。 If you want to learn native js, which I highly recommend, you'll want to read up on listening for when the window is ready. 如果您想学习本机js（我强烈推荐），则需要阅读有关何时窗口准备就绪的内容。
解决方案3
1 2014-02-24 03:46:47
To answer your questions: 要回答您的问题：
The first code block (non-jQuery) was using selectedIndex for your select element, which was returning a numerical value (the index value) of the selected item. 第一个代码块（非jQuery）将selectIndex用作select元素，该元素返回所选项目的数值（索引值）。 You wanted the string value to check against your map of colors. 您希望字符串值对照您的颜色映射进行检查。 Updating your code so it looks something like: 更新代码，使其看起来像：
var colors = document.getElementById('colors');
colors.onchange=function(){
var salute = document.getElementById("salute");
var item = document.getElementById("colors").value;
var color = colorsMap[item];
salute.style.color = color;
}
will work. 将工作。
Updated fiddle: http://jsfiddle.net/pH4wW/2/ 更新的小提琴： http : //jsfiddle.net/pH4wW/2/
The second one, you just need jQuery :) 第二个，您只需要jQuery :)
解决方案4
0 已采纳 2014-02-24 03:46:49
There are so many thing has to be changed in the code. 代码中有太多事情需要更改。
If you are doing it with js 如果您正在使用js
colors.onchange=function(){
var salute = document.getElementById("salute");
var item = document.getElementById("colors").selectedIndex;
var color = colorsMap[item];
salute.style.color = color;
};
has to be changed to 必须更改为
document.getElementById("colors").onchange=function(){
var salute = document.getElementById("salute");
var item = document.getElementById("colors").value;
var color = colorsMap[item];
document.getElementById("salute").style.color = color;
};
you have to attach onchange event using document.getElementById 您必须使用document.getElementById附加onchange事件
if jquery 如果jQuery
$('#colors').change(function(){
var salute = document.getElementById("salute");
item=$(this).val();
cl = colorsMap[item];
$('#salute').css('color', cl);
});
Also you are missing jquery library. 另外，您缺少jquery库。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.