循环场景下下拉框选中值颜色选中后变回黑色的问题

你遇到的问题是原生<select>的特性导致的：下拉展开时的选项颜色由option元素控制，但选中后显示的文本颜色是由select元素本身决定的，你当前的CSS只设置了option的颜色，所以选中后会变回默认黑色。

解决方案一（推荐，结合Knockout绑定） #

通过Knockout的css绑定给select添加对应状态的类，再用CSS设置类的颜色：

修改后的HTML #

<div class="appointmentList" data-bind="foreach: visibleAppointments">
     <select class="form-control appt-status" 
             data-bind="value: confirmationStatus, 
                        css: { 
                          'status-confirmed': confirmationStatus() === 1,
                          'status-reschedule': confirmationStatus() === 2,
                          'status-pending': confirmationStatus() === 3,
                          'status-not-opted': confirmationStatus() === 0
                        },
                        event:{ change: $parent.statusChanged}" >
                   <option data-icon="" class="status-list" value="1" > Confirmed</option>
                   <option class="status-list" value="2" >Reschedule</option>
                   <option class="status-list" value="3" >Pending</option>
                   <option class="status-list" value="0" >Not opted-in</option>
               </select>
</div>

修改后的CSS #

/* 保留下拉选项的颜色设置 */
.appt-status option[value="0"] {
    color: #3EA47B;
}
.appt-status option[value="1"] {
    color: #3EA47B;
}
.appt-status option[value="2"] {
    color: #FF0000;
}
.appt-status option[value="3"] {
    color: #FFA927;
}

/* 给select添加对应状态的颜色 */
.appt-status.status-confirmed,
.appt-status.status-not-opted {
    color: #3EA47B;
}
.appt-status.status-reschedule {
    color: #FF0000;
}
.appt-status.status-pending {
    color: #FFA927;
}

解决方案二（CSS属性选择器） #

利用select的value属性选择器设置颜色，需要确保Knockout同步更新select的属性值：

修改后的HTML #

<div class="appointmentList" data-bind="foreach: visibleAppointments">
     <select class="form-control appt-status" 
             data-bind="value: confirmationStatus, 
                        attr: { value: confirmationStatus },
                        event:{ change: $parent.statusChanged}" >
                   <option data-icon="" class="status-list" value="1" > Confirmed</option>
                   <option class="status-list" value="2" >Reschedule</option>
                   <option class="status-list" value="3" >Pending</option>
                   <option class="status-list" value="0" >Not opted-in</option>
               </select>
</div>

修改后的CSS #

/* 保留下拉选项的颜色设置 */
.appt-status option[value="0"] {
    color: #3EA47B;
}
.appt-status option[value="1"] {
    color: #3EA47B;
}
.appt-status option[value="2"] {
    color: #FF0000;
}
.appt-status option[value="3"] {
    color: #FFA927;
}

/* 根据select的value属性设置颜色 */
.appt-status[value="0"],
.appt-status[value="1"] {
    color: #3EA47B;
}
.appt-status[value="2"] {
    color: #FF0000;
}
.appt-status[value="3"] {
    color: #FFA927;
}

注意事项 #

• 原CSS中第一个选择器.appt-status select option[value="0"]是冗余的，因为.appt-status本身就是select元素，直接写.appt-status option[value="0"]即可。
• 方案一的兼容性更好，因为部分浏览器对动态更新的select属性值识别有延迟，而Knockout的css绑定会实时更新类名。

内容的提问来源于stack exchange，提问作者Rnue