HTML選擇後用透明文本選擇？

Question

我有一個HTML選擇不同的彩色背景選項。它工作正常，但我需要一件小事。下拉選項中的文本只應在下拉列表打開時顯示。基本上，當我選擇一個選項，我想要透明文本，所以我只能看到顏色。

的Jquery：

$(document).ready(function() { 
     $('select[id^=dropdown]').children().each(function() { 
      colors = { "N": "lightgrey", "G": "green", "O": "orange", "A": "yellow", "R": "red", "U": "purple" } 
      $(this).attr('style', 'background-color:' + colors[$(this).val()] + ';'); 
     }); 
     $('select[id^=dropdown]').change(function() { 
      $(this).attr('style', $(this).find('option:selected').attr('style')); 
     }).change(); 
    }); 

HTML選擇：

<select class="selectElement" runat="server" id="dropdown_test"> 
    <option value="N">N</option> 
    <option value="G">G</option> 
    <option value="O">O</option> 
    <option value="A">A</option> 
    <option value="R">R</option> 
    <option value="U">U</option> 
</select> 

Answer 1

試試這個代碼，工作在每一個瀏覽器包括IE：

HTML

<select id="select1" onchange="colourFunction()"> 
<option class="white" value="A">This should have a WHITE background</option> 
<option class="red" value="B">This should have a RED background</option> 
<option class="yellow" value="C">This should have a YELLOW background</option> 
<option class="green" value="D">This should have a GREEN background</option> 
</select> 

CSS

#select1 {width:150px; color:rgba(0, 0, 0, 0);} 
#select1:focus, #select1:focus { 
color:black; 
} 
.white {background:white;} 
.red {background:red;} 
.yellow {background:yellow;} 
.green {background:green} 

JS

function colourFunction() { 
var myselect = document.getElementById("select1"), 
colour = myselect.options[myselect.selectedIndex].className; 
myselect.className = colour; 
myselect.blur(); //This just unselects the select list without having to click 
somewhere else on the page 
} 

HTH :)

Answer 2

使用此： 對於刪除文本時，您選擇的項目

$('select[id^=dropdown]').change(function() { 
    var elem = $(this).children("*[value='" + $(this).val() + "']"); 
    elem.data("backup",elem.html()).html(""); 
    $(this).attr('style', 'background-color:' + colors[elem.val()] + ';'); 
}); 

但你需要牛逼聲明數組顏色出。

Answer 3

如果您仍然希望透明文本選項，試試這個：

$(document).ready(function() { 
    $('#dropdown').children().each(function() { 
     colors = { "N": "lightgrey", "G": "green", "O": "orange", "A": "yellow", "R": "red", "U": "purple" } 
     $(this).attr('style', 'background-color:' + colors[$(this).val()] + ';'); 
     $('#dropdown option').css('color','black'); 
    }); 

    $('#dropdown').change(function() { SetStyle(this) }) 


}); 

SetStyle('#dropdown'); //Set the style immediately 

function SetStyle(obj) { 
    var color = $(obj).find('option:selected').css('background-color'); 
    $(obj).css({ 
     'color':'rgba(0,0,0,0)', 
     'background-color':color 
    }); 
} 

所以在這裏我們去，最後的努力！這將在加載時設置背景顏色，並將顏色設置爲透明。然後它會將所有選項的顏色設置爲黑色。因此，它會顯示在下拉列表中沒有文字，但是在打開時會顯示。但實際上，文本是黑色的，在關閉時你看不到它。

這比我以前的答案:)

通知我從

修改您的選擇

$('select[id^=dropdown]') 

到

$('#dropdown') 

更好您不必選擇元素，其中屬性「 Id'等於xxx，'＃'簡寫爲:)

希望這有助於！