javascript - 样式关闭 View 下拉列表

Question

Demo

问题: 嗨，检查我的 fiddle 。我想单独将所选值大写[关闭 View 值]。我的意思是当我打开下拉菜单时，所有选项都应该是小写的。但是选择的选项是大写的。

代码

  <select>
    <option>One</option>
    <option>Two</option>
  </select>

$("select").change(function () {
               $(this).find("option").text(function (i, text) {
                     return $(this).is(":selected") ?  text.toUpperCase() : text.toLowerCase();
               });
            })

这可能吗？如果是这样，任何建议。如果不是，请告诉我原因。请看附件。这就是我所说的封闭 View

Answer 1

非常奇怪的解决方法(当下拉列表关闭时，选定的选项是大写的；当下拉列表打开时，所有选项都是小写的)，但应该工作:

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

更新。更多解决方法，但应该解决上述问题:

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();