1

我有一个带有不同颜色背景选项的 HTML 选择。它工作正常，但我需要一件小事。下拉选项中的文本应仅在下拉菜单打开时出现。基本上，当我选择一个选项时，我想要透明文本，所以我只能看到颜色。

查询：

$(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>
4

3 回答 3

2

试试这个代码，适用于包括 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 :)

于 2013-05-13T22:34:37.593 回答
1

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

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

希望这可以帮助！

于 2013-05-10T14:41:44.130 回答
0

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

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

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

于 2013-05-10T14:11:03.817 回答