jQuery - 根据最后一个字符更改下拉列表选定的颜色

Question

我需要为具有多个下拉菜单的页面选择颜色，颜色表示谁是首选，谁是可用的。我的问题是所选的选项没有着色，只有选项。

$("#InterviewManagementFrm .ddlInterviewer option:selected").each(function (index, value) {
    var text = $(this).text();
    var lastChar = text.substr(text.length - 1)

    if (lastChar === 'A') {
        console.log(value);
        $(value).css("background-color", "#FECB00");
    }
    else if (lastChar === 'P') {
        console.log(value);
        $(value).css("background-color", "#99FF66");
    }
});

日志

 main.js:95
<option value=​"31748236-d0eb-422d-9a0a-3e58da0cc3d2" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8264a677-bb6d-4b7e-b65a-a96b6806bc94" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"ffe25d81-9ca5-48dd-98a3-19af881ec1b7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"ffe25d81-9ca5-48dd-98a3-19af881ec1b7" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"ffe25d81-9ca5-48dd-98a3-19af881ec1b7" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"ffe25d81-9ca5-48dd-98a3-19af881ec1b7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"ffe25d81-9ca5-48dd-98a3-19af881ec1b7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8264a677-bb6d-4b7e-b65a-a96b6806bc94" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8264a677-bb6d-4b7e-b65a-a96b6806bc94" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d07b7e2d-330e-4806-838f-c20f5e3db98b" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"d07b7e2d-330e-4806-838f-c20f5e3db98b" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4de1036f-1f62-4f84-9f80-b7bc5d6a6fce" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"4de1036f-1f62-4f84-9f80-b7bc5d6a6fce" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"4de1036f-1f62-4f84-9f80-b7bc5d6a6fce" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"4fa9ee12-14ba-48a0-b6dc-90cae56179f7" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"0b77c04e-9aa5-4453-8ab1-105814008c71" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"PreferredPreference">​…​</option>​ main.js:99
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"d6a8565f-67cb-4b8f-8f8a-7afad50bc9fa" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"8e4a82c7-fd91-4b6c-bd58-4d4703e7c811" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​ main.js:95
<option value=​"227a6abb-225c-4587-bc73-0f65baf74e2c" class=​"AcceptedPreference">​…​</option>​

在屏幕截图中，您可以看到选项是彩色的，但我希望它们都是彩色的。

任何jQuery大师想帮我解决这个问题吗？

Answer 1

我不知道您的HTML，但看起来您正在尝试添加和删除整个下拉列表中的类，而不是选定的选项。您可以添加option:selected仅将其应用于所选元素，因此它可能如下所示：

$("#myDropdown option:selected").addClass("MyClass");

Answer 2

我最终这样做了：

 $("#InterviewManagementFrm .ddlInterviewer option:selected").each(function (index, value) {
        var text = $(this).text();
        var lastChar = text.substr(text.length - 1)

    if (lastChar === 'A') {
        console.log(this);
        $(this).parent().addClass("AcceptedPreference");
    }
    else if (lastChar === 'P') {
        console.log(this);
        $(this).parent().addClass("PreferredPreference");
    }
});

因为我选择了这个选项，我需要向父母移动一下，然后也要用颜色。