An unconventional workaround has been implemented in this code snippet: when the dropdown list is closed, the selected option appears in uppercase, while all options are displayed in lowercase when the dropdown list is open.
For a demonstration of this workaround, check out the Fiddle.
var wasSelected = false;
$("select").click(function()
{
if (!wasSelected) //on dropdown open
{
$(this).find("option:selected").text(function(i, text)
{
return text.toLowerCase();
});
}
else
{
wasSelected = false;
}
});
$("select").change(function()
{
$(this).find("option").text(function(i, text)
{
return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase();
});
wasSelected = true;
});
$("select").change(); //initial dropdown formatting
$("select").click(); //initial dropdown formatting
An update has been made to address some issues with additional workarounds:
Check out the updated version on Fiddle.
var wasSelected = false;
var wasClicked = false;
$("select").click(function()
{
if (wasClicked)
{
onClose($(this));
}
else if (!wasSelected)
{
$(this).find("option:selected").text(function(i, text)
{
return text.toLowerCase();
});
wasClicked = true;
}
else
{
wasSelected = false;
}
});
$("select").change(function()
{
wasSelected = wasClicked;
onClose($(this));
});
$("select").blur(function()
{
onClose($(this));
});
function onClose(jElement)
{
jElement.find("option").text(function(i, text)
{
return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase();
});
wasClicked = false;
}
$("select").change();