造型closedview下拉列表

时间:2014-10-13 10:10:09

标签: javascript jquery html css

enter image description here Demo

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

代码

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

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

3 个答案:

答案 0 :(得分:2)

非常奇怪的解决方法(当下拉列表关闭时,选择的选项是大写;当打开下拉列表时,所有选项都是小写),但应该有效:

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

答案 1 :(得分:1)

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

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

检查这个小提琴Dropdown case change

答案 2 :(得分:0)

据我所知,您的代码运行正常。如果您希望在页面加载时在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>