1

我的网页中的 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属性，然后在动态中将自定义代码附加到 HTML 中，就像 - 如果value=en，添加background:red或类似的东西。这可能吗？

谢谢。

4

3 回答 3

0

有些人会提供一个 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'
于 2012-04-18T14:35:06.353 回答
0

使用 jQuery 来做这样的事情：

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

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

PS：未经测试，但我相信应该可以

于 2012-04-18T15:02:19.287 回答
0

这是弗洛里安提到的 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 小提琴：http: //jsfiddle.net/LBFBd/

于 2012-04-18T15:04:37.410 回答