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，'＃'简写为:)

希望这有助于！