Question

假设我有一个像这样的选择列表

<select>
<option selected>Bear</option>
<option>Tiger</option>
<option>Lion</option>
<option>Porcupine</option>
</select>

当菜单处于“非活动状态”并且只显示所选选项时，我希望它显示为大写：

ie  BEAR \/

当菜单打开时，它应该保留原始格式的选项

Bear
Tiger
Lion
Porcupine

我知道您可以使用css将所有选项设置为大写，但是当菜单打开时，所有选项都将为大写。

所以我在想jQuery。

也许有些替换功能。

我已经尝试了一些接近这个的东西，但无法让它发挥作用：

$("select option:selected").text(t.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }))

我还将它附加到选择更改事件。

有人能帮助我把这一切都拉到一起吗？

Answer 1

查看此updated jsfiddle：

var map = {}, $firstOption = $('option:eq(0)');

$('select option').each(function() {
    var text = $(this).text();

    map[text.toLowerCase()] = {
        o:text,
        u:text.toUpperCase()
    }
});

$firstOption.text($firstOption.text().toUpperCase());

$('select').on('change',function() {
    var $selected = $('option:selected'),
        text = $selected.text().toLowerCase(),
        $siblings = $selected.siblings();

    $selected.text(map[text]['u']); 

    $siblings.each(function() {
        var text = $(this).text().toLowerCase();

        $(this).text(map[text]['o']);
    });
});

它的作用是将文本的原始版本和每个option元素的文本的大写版本存储在普通对象中。原始和大写版本可以通过全部小写的对象文本访问（只是作为一致的标识符...但是，您可以通过您想要的任何键访问它们。）

当您更改select元素时，它会将所选option的文本设置为其文本的大写版本，并将其兄弟元素的文本设置为其文本的原始版本。< / p>

<强>更新

添加了一个在页面加载时默认将第一个option的文本更改为大写的函数。

更新的代码

这是一个updated jsfiddle，我认为它更简单一些，为了回应您的评论，我更改了它以选择页面加载时选择的第一个选项：

var map = {}, $selected = $('option:selected');

$('select option').each(function() {
    var text = $(this).text();

    map[text.toLowerCase()] = {
        o:text,
        u:text.toUpperCase()
    }
});

$selected.text($selected.text().toUpperCase());

$('select').on('change',function() {
    $('option').each(function() {
        var $this = $(this),
            text = $this.text(),
            bool = $this.is(':selected'),
            l = text.toLowerCase(),
            u = map[l]['u'],
            o = map[l]['o'],

            fn = {
                'true': function() { $this.text(u) },
                'false': function() { $this.text(o) }
            }[bool]();

     })
});

用作jQuery插件

这是jsfiddle：

(function($) {
    $.fn.toggleSelect = function() {
        return this.each(function() {
            var map = {}, $selected = $(this).find('option:selected');

            $(this).find('option').each(function() {
                var text = $(this).text();

                map[text.toLowerCase()] = {
                    o:text,
                    u:text.toUpperCase()
                }
            });

            $selected.text($selected.text().toUpperCase());

            $(this).on('change',function() {
                $(this).find('option').each(function() {
                    var $this = $(this),
                        text = $this.text(),
                        bool = $this.is(':selected'),
                        l = text.toLowerCase(),
                        u = map[l]['u'],
                        o = map[l]['o'],

                        fn = {
                            'true': function() { $this.text(u) },
                            'false': function() { $this.text(o) }
                        }[bool]();

                 })
            });
        });
    }
}(jQuery));

$('#a').toggleSelect();

只需选择带有jQuery选择器的select元素（例如$('a')），然后调用toggleSelect。在上面的代码中，只有jsFiddle中的第一个select元素才会应用该方法。此方法适用于多个select元素。

Answer 2

我已根据所选选项编写了此提示代码：

$('select[name="Poradi\[\]"]').tooltip({
    position: {
        my: 'right center',
        at: 'left center'
    },
    content: function(){
        if($(this).find('option:selected').val() == 0 )
        {
            return 'Obrázek nebude zobrazen';
        }
        else
        {
            return 'Obrázek bude zobrazen ' + $(this).find('option:selected').val() + '. v pořadí';
        }
    }
});

部分

$(this).find('option:selected').val()

将调用我选择的选项的值 - 您的代码将是

$(this).find('option:selected').toUpperCase();

左右;

但我不明白为什么要在大写字母上转换选定的选项;我认为重新着色这个选项会好得多，主要是如果原始值不是用小写字母（小写字母）写的。

我想您希望在更改时将文本更改为大写 - 然后所有代码都是（例如）：

$('select[name="???"]').change(
    function(){
        $(this).find('option:selected').css('color', '#CFCFCF');});

和

$('select[name="???"]').change(
    function(){
        $(this).find('option:not(:selected)').css('color', '#FFFFFF');});

或

$('select[name="???"]').change(
    function(){
        $(this).find('option:selected').css('text-transform', 'uppercase');});

和

$('select[name="???"]').change(
    function(){
        $(this).find('option:not(:selected)').css('text-transform', 'capitalize');});

或

$('select[name="???"]').change(
    function(){
        $(this).find('option:not(:selected)').css('text-transform', 'none');});

顺便说一句：我很抱歉上面写的剧本显示的捷克语文字。

正如@ smclark89所写，也可以使用

$('select[name="???"]').change(
    function(){
        $(this).find('option').filter(':selected').css('text-transform', 'uppercase');});

和（因此重新格式化回原始大写字母）

$('select[name="???"]').change(
    function(){
        $(this).find('option').filter(':not(:selected)').css('text-transform', 'none');});

修改：

$('option:selected').each(function(){ $(this).css('text-transform', 'uppercase' ); });

将设置默认值：选中的值转换为大写

$('option:selected').change(function(){ $(this).css('text-transform', 'uppercase' ); });

将以大写形式转换选定选项的值 - 选择它们时。

但它仅在显示选项时显示，而不是显示。

修改：注意：可能只在某些浏览器中才是正确的。我发现Opera不喜欢<select>内部元素的格式化，当我完成我的supertemplate机器并对其进行测试时。您会发现所选元素在代码中具有新样式，但不会显示。

在选择菜单中只有当前选中并显示的选项，格式为大写

2 个答案:

更新的代码

用作jQuery插件