如何使用JavaScript追加带有样式属性的选项值？

Question

我有一个HTML <select>元素，该元素由使用JavaScript附加的数据库中的数据填充。我想通过将style="color:red"应用于具有payment_status = false的值和style="color:green"应用于具有payment_status = true的值来进行区分。我将如何在其上插入样式。我尝试插入样式，但值不会显示在下拉列表中。请帮我解决这个问题。请看下面的代码。谢谢。

$('#schedule_payment').append($('<option>', {
    value: '',
    text: 'Select Schedule'
}));

$.each(obj.amortizations, function(i, item) {
    if (item.payment_status == true) {
        $('#schedule_payment').append($('<option style="color:red">', {
            value: item.schedule,
            text: item.schedule
        }));
    } else {
        $('#schedule_payment').append($('<option>', {
            value: item.schedule,
            text: item.schedule
        }));
    }
});

Answer 1

我认为这是您的解决方案：

var obj = {amortizations: [{
  payment_status: true,
  schedule: 1000
},{
  payment_status: false,
  schedule: 10000
},{
  payment_status: false,
  schedule: 20000
},{
  payment_status: true,
  schedule: 100000
}]};

$('#schedule_payment').append($('<option>', { 
  value: '',
  text : 'Select Schedule'
}));
  
$.each(obj.amortizations, function (i, item) {
  if( item.payment_status == true ){
    $('#schedule_payment').append($('<option style="color:red">').attr('value', item.schedule).text(item.schedule));
  }else{
    $('#schedule_payment').append($('<option style="color:green;">').attr('value', item.schedule).text(item.schedule));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="schedule_payment"></select>

或：

var obj = {amortizations: [{
  payment_status: true,
  schedule: 1000
},{
  payment_status: false,
  schedule: 10000
},{
  payment_status: false,
  schedule: 20000
},{
  payment_status: true,
  schedule: 100000
}]};

$('#schedule_payment').append($('<option>', { 
  value: '',
  text : 'Select Schedule'
}));
$.each(obj.amortizations, function (i, item) {
  if( item.payment_status == true ){
    $('#schedule_payment').append($('<option>', {
      style: 'color:red',
      value: item.schedule,
      text: item.schedule
    }));
  }else{
    $('#schedule_payment').append($('<option>', {
      style: 'color:green',
      value: item.schedule,
      text: item.schedule
    }));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="schedule_payment"></select>