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

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>