javascript - 将代码动态 append 到选择的元素

Question

我的网页中的 Google 翻译工具包生成了以下代码:

<select class="goog-te-combo">
 <option value="en">English</option>
 <option value="af">Afrikaans</option>
 <option value="sq">Albanian</option>

我一直在拼命创建一个允许我转换的脚本:

<option value="en">English</option>
                to
<option value="en" **style="background: red;"**>English</option>      

该脚本将读取 Option 标记的 Value 属性，然后将相应的自定义代码动态 append 到 HTML，就像 - 如果 value= en ，添加 background:red 或类似的内容。这可能吗？

谢谢。

Answer 1

这是 Florian 提到的 JQuery 答案即将到来。

$(document).ready(function() {
var language = '';
var color = '';
$("#myselect option").each(function() {
    language = $(this).attr('value');
    switch (language) {
    case 'en':
        color = 'red';
        break;
    case 'fr':
        color = 'blue';
        break;
    default:
        color = "black";
        break;
    }
    $(this).attr('style', "color:" + color + ";");
});

$("#myselect").change(function() {
    $(this).css('color', $(this).find("option:selected").css('color'));
});

});

如果您愿意，您可以向 case 语句添加更多颜色。另外，只要更改 JQuery，请确保为 select 语句提供 myselect 的 ID 或任何您想要的内容。

JS fiddle :http://jsfiddle.net/LBFBd/