附加代碼

我已經通過谷歌翻譯工具包在我的網頁生成下面的代碼在運行一個select元素：附加代碼

<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>

該腳本會讀取選項標籤的價值屬性，然後相應地添加自定義代碼在運行過程中HTML只是想 - 如果value = en，加上背景：紅色或類似的東西。這可能嗎？

謝謝。

來源

2012-04-18 Manish Pradhan

追加什麼東西在HTML？ – Aidanc 2012-04-18 14:25:08

你沒有道理，男人！ – Neil 2012-04-18 14:25:40

現在應該清楚.. THX – 2012-04-18 14:30:30

這是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，請確保給出您的選擇語句的ID爲myselect或您想要的任何內容。

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

來源

2012-04-18 15:04:37

請看看這裏 - http://htmlgeeks.net/translate/abc.html它似乎並沒有工作。我一定做錯了什麼。我對JS很新。 – 2012-04-18 15:16:20

我有一些錯誤。我已經更新並添加了js小提琴。 – 2012-04-18 16:24:22

非常感謝。你是個好人。 – 2012-04-18 17:44:19

有些人會提供一個jQuery的答案，這裏是一個香草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-18 14:35:06

使用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-18 15:02:19 asprin

回答

相關問題