JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<select data-interval-name="AM">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" class="territory-blue">Three</option>
</select>
<select data-interval-name="AM">
    <option value=""></option>
    <option value="1" selected="selected">One</option>
    <option value="2">Two</option>
    <option value="3" class="territory-blue">Three</option>
</select>
<select data-interval-name="AM">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" class="territory-blue">Three</option>
</select>
<ul id="debug"></ul>

CSS

.sales-rep-has-appointment {
    color: red;
}
.territory-blue {
    color: blue;
}
.sales-rep-has-appointment.territory-blue {
    color: red;
}
select.sales-rep-has-appointment option {
    color: black;
}
select.sales-rep-has-appointment option.territory-blue {
    color: blue;
}
select.sales-rep-has-appointment option.sales-rep-has-appointment {
    color: red;
}
select.sales-rep-has-appointment option.sales-rep-has-appointment.territory-blue {
    color: red;
}

JavaScript

$('select').change(function (e) {
    var $select = $(e.target),
        $option = $select.find('option:selected'),
        salesRepId = $option.val(),
        $sameInterval = $('select[data-interval-name="' + $select.data('interval-name') + '"]');

    if (salesRepId.length !== 0 && $sameInterval.find('option:selected[value="' + salesRepId + '"]').not($option).length > 0) {
        //Rba.AssignAppointments.Index.salesRepAlreadyAssigned($option.text());
        console.log($option.text());
    }

    $sameInterval.find('option[value!=""]').addBack().removeClass('sales-rep-has-appointment');
    $sameInterval.find('option:selected[value!=""]').each(function () {
        $sameInterval.find('option[value="' + $(this).val() + '"]').addClass('sales-rep-has-appointment');
        $(this).closest('select').addClass('sales-rep-has-appointment');
    });
}).change();