如何根据值将 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中的选项绑定为下拉列表中的某些选项添加类