选择后带有透明文本的HTML选择？答案

【问题标题】：HTML select with transparent text after selection?选择后带有透明文本的HTML选择？
【发布时间】：2013-05-10 13:56:36
【问题描述】：

我有一个带有不同颜色背景选项的 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>

【问题讨论】：

标签： jquery html colors html-select

【解决方案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}

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

【讨论】：

【解决方案2】：

如果你仍然想要透明文本选项，试试这个：

$(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的元素，'#'是那个的缩写:)

希望这会有所帮助！

【讨论】：

您好，感谢您的回答。我还意识到选择后文本会消失。当我将您的代码添加到我当前的 jquery 代码中时，它会使文本始终透明。我正在寻找的是文本应该只在下拉菜单打开时出现。
这是我的错误，我没有明确说明我想要什么。我真的很感谢你的帮助:)
嘿伙计，很好的解决方案。我希望文本只出现在选项中。到目前为止，您的代码效果最好，但我仍然可以在页面加载时看到选项“N”。
我现在设法通过在我的选择类中添加“颜色：透明”来解决这个问题。但是，这不适用于 IE（讨厌它）。无论如何，非常感谢您的帮助和时间:)
不客气。现在进行最后的尝试，我认为这对你会更好。我现在不在家。

【解决方案3】：

使用这个： 选择项目时删除文本

$('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()] + ';');
});

但是你不需要声明数组颜色。

【讨论】：