Question

我的网页中的Google Translate Toolkit生成了以下代码：

<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 属性，然后在运行时将相应的自定义代码附加到HTML上 - 如果 value = en ，添加 background：red 或类似的东西。这可能吗？

感谢。

Answer 1

有些人会提供一个jQuery答案，这是一个vanilla js答案：

考虑以下HTML：

<form name="my">
    <select name="sl">
        <option name="en" value="en">
    </select>
</form>

然后这个JS会做：

document.forms.my.options['en'].style.background = 'red'

Answer 2

使用jQuery做这样的事情：

$(function(){
    $('.goog-te-combo').change(function{
    var selectedValue = $(this).val();

    if(selectedValue == 'en')
     {
      $('.goog-te-combo option:selected').css('background','Red');
     }
    });
});

PS：未经测试，但我相信应该有效

Answer 3

以下是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，请确保为选择的语句提供myselect或任何您想要的ID。

JS小提琴：http://jsfiddle.net/LBFBd/

动态地将代码附加到选择元素

3 个答案: