如何根据值将 css 类添加到选择列表选项中 - 使用 jQuery

Posted

技术标签:

【中文标题】如何根据值将 css 类添加到选择列表选项中 - 使用 jQuery【英文标题】:How can I add css classes to a select list's options based on the value - using jQuery 【发布时间】:2020-08-12 14:52:57 【问题描述】:

技术:

asp.net MVC 5 .net 框架 + jQuery

案例:

我正在运行时构建一个选择列表,其中数据是通过 ajax 从控制器获取的。 数据作为数据类型List<SelectListItem> 返回到ajax 调用。 然后使用 jQuery 动态构建选择列表。这一切都很好,并且有效。

问题:

将所有选项附加到选择列表后,我尝试根据它们的值将 css 类添加到选项中。这是我无法工作的地方。

我对在浏览器开发工具中调试 js 还是很陌生,但在我看来,我所做的比较并没有像我想象的那样发挥作用。也许 if/else 比较是我弄错的地方!?

基础 HTML:

<label for="EditBadge" class="form-label pt-00">Badge type</label>
<select class="form-control shadow mb-20" id="EditBadge" name="BadgeType">
</select>

jQuery ajax 调用:

$.ajax(
        url: '/OrderSetting/GetOrderTypeData/' + id,
        dataType: 'json',
        type: 'GET',
        async: true,
        cache: false,
        success: function (result) 
            $('#EditOrderType').val(result.OrderType);
            $('#EditLeadTime').val(result.DeliveryDays);
            $('#orderTypeId').val(result.OrderSettingId);


            let data = result.BadgeTypes; // The List<SelectListItem>
            let options = $("#EditBadge"); // The empty select list

            options.find('option').remove(); // Clear any options from a previous operation

            // Populate the select list
            options.append($("<option />").val('Default').text('Select badge type ...'));
            $.each(data, function () 
                if (this.Value !== 'Default') 
                    if (this.Selected === true) 
                        options.append($("<option />").val(this.Value).text(this.Text).attr('selected', 'selected'));
                     else 
                        options.append($("<option />").val(this.Value).text(this.Text));
                    
                
            );

            // FROM HERE ON THIS IS WHERE IT ALL FAILS
            // Get all the added options
            let newOptions = $('#EditBadge > option');

            // Iterate the options, add css based on the value property of the options element
            newOptions.each(function () 
                if (this.Value === 'Success') 
                    this.addClass('badge badge-pill badge-success');
                
                else if (this.Value === 'Warning') 
                    this.addClass('badge badge-pill badge-warning');
                
                else if (this.Value === 'Danger') 
                    this.addClass('badge badge-pill badge-danger');
                
            );


        ,
        error: function (xhr) 
            alert('There was an error getting the entity data.');
        
    );

更新

通过将this.Value 更改为this.text,我现在得到了所需的比较。调试器现在抛出异常:"this.addClass is not a function"

所以现在我正在使用这段代码:

let newOptions = $('#EditBadge > option');

            newOptions.each(function () 
                if (this.text === 'Success') 
                    this.addClass('badge badge-pill badge-success');
                
                else if (this.text === 'Warning') 
                    this.addClass('badge badge-pill badge-warning');
                
                else if (this.text === 'Danger') 
                    this.addClass('badge badge-pill badge-danger');
                
            );

幸运的是,text 和 value 属性是相同的。如果有人知道为什么 this.Value 不起作用,请在下面发表评论。我还在想如何访问 value 属性。

【问题讨论】:

【参考方案1】:

谷歌搜索异常导致我得到另一个 SO 答案,其中 this 关键字被包装在 jQuery $() 容器中。这就是诀窍。 功能齐全的代码位现在显示为:

let newOptions = $('#EditBadge > option');

            newOptions.each(function () 
                if (this.text === 'Success') 
                    $(this).addClass('badge badge-pill badge-success');
                
                else if (this.text === 'Warning') 
                    $(this).addClass('badge badge-pill badge-warning');
                
                else if (this.text === 'Danger') 
                    $(this).addClass('badge badge-pill badge-danger');
                

【讨论】:

以上是关于如何根据值将 css 类添加到选择列表选项中 - 使用 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

使用KnockoutJS中的选项绑定为下拉列表中的某些选项添加类

如何根据选项类动态过滤 select2 列表

根据 WooCommerce 中的自定义字段值将文本添加到订单摘要

如何在颤动中选择基于下拉项添加文本字段值

jquery在下拉菜单中找到所选项目的值

选择列表框选项时将行添加到 Data GridView VB.net