Как вставить значения параметров с атрибутом style, используя JavaScript addnd?

Question

У меня есть элемент html <select>, который заполняется данными в базе данных с использованием javascript append. Я хотел сделать различие, применяя 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>