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

如果您仍想要透明文字选项，请尝试以下操作：

$(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的元素，“＃”是其中的简称：）

希望这有帮助！

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

但你需要声明阵列颜色。

选择后用透明文本选择HTML？

3 个答案: