javascript - 为 for 循环中的选项项目提供颜色
问题描述
在我的 ajax 成功中,我有 4 个值value.BookableResourceId,value.Name,value.FontColor,value.BackgroundColor
。我的要求是在创建具有名称和 BookableResourceId 的选项时添加 FontColor 和 BackgroundColor 以显示具有相应字体和背景颜色的项目。
$(resourceElement).select2({
data: resourceData,
closeOnSelect: true,
placeholder: '(Empty)',
allowClear: true,
}).on('select2:open', function (e) {
$.ajax({
url: '/XX/YYY',
type: "POST",
async: false,
success: function (response) {
for (var data in response) {
var newOption = new Option(response[data].Name, response[data].BookableResourceId, false, false);
$(resourceElement).append(newOption).trigger('change');
}
下面显示了ajax响应:
我试过下面的代码。但它也使数据填充失败。
var add_Helpresrs = [];
$.each(response, function (index, value) {
add_Helpresrs.push(
{
id: value.BookableResourceId,
text: value.Name,
color: value.FontColor,
background: value.BackgroundColor
});
});
var newArray = [];
add_Helpresrs.map(function (item) {
newArray.push({
id: item.id,
text: '<span style="color:' + item.color + '; background:' + item.background + '">' + item.text + '</span>'
})
})
$(resourceElement).append(newArray).trigger('change');
解决方案
只需将颜色和背景颜色添加到响应中的新选项:
const response = [{
Name: 'bob',
BookableResourceId: 'bob\'s book',
FontColor: 'red',
BackgroundColor: 'blue'
}, {
Name: 'Steve',
BookableResourceId: 'steve\'s book',
FontColor: 'green',
BackgroundColor: 'orange'
}];
const select = document.querySelector('select');
response.forEach(book => {
var newOption = new Option(book.Name, book.BookableResourceId, false, false);
newOption.style.color = book.FontColor;
newOption.style.backgroundColor = book.BackgroundColor;
select.appendChild(newOption);
});
<select>
<option>-----</option>
</select>
推荐阅读
- c# - 如何将假货注入 DI 容器?
- html - 使用 flexbox,在 flexitem 内的 div 上显示滚动条
- java - 如何在 TaskExecutionAutoConfiguration 旁边创建额外的 TaskExecutor?
- javascript - 使用 NodeJS 在 Firebase 数据库中创建 Schema
- javascript - “数字”类型的参数不可分配给“持续时间构造器”类型的参数
- android - 如何区分 Google Fit Api 中手动添加的步骤和传感器记录的步骤
- facebook - Facebook Messenger 链接按钮 - 避免留下 Facebook 消息
- angularjs - Angularjs - 如何为来自 ng repeat 的动态数据展开过滤器上的折叠 div
- python - 是否可以在请求模块中取消长时间运行的 HTTP 请求?
- firebase - 可以从应用程序根目录更改 firebase-messaging-sw.js 位置,还是隐藏其密钥?由于 SENDER_ID 密钥已公开/公开