Question

问题： 嗨，检查我的小提琴。我想单独使用所选值[闭合视图值]。我的意思是当我打开我的下拉列表时，所有选项都应该是小写的。但选择的选项是大写的。

代码

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

有可能吗？如果是这样，任何建议。如果没有，请告诉我原因。请参阅附件。这就是我所说的封闭视图

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

Answer 2

    $('option').each(function(i){
    if(!$(this).is(':selected'))
        $(this).text($(this).text().toLowerCase());
    });

检查你的小提琴。我已经添加了上面的代码。我这就是你想要的一切??

检查这个小提琴Dropdown case change

Answer 3

据我所知，您的代码运行正常。如果您希望在页面加载时在UPPER情况下具有预先选择的值，那么您需要在jQuery dom上调用代码

您可以使用以下代码

$("select").change(function () {
  modifySelectBox();
})

jQuery(document).ready(function(){        
    modifySelectBox()
})

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

<强> HTML

<select id="myselbox">
    <option selected="selected">One</option>    
    <option>Two</option>
    <option>Three</option>
</select>

造型closedview下拉列表

3 个答案: