jQuery - изменить выпадающий выбранный цвет на основе последнего символа

Мне нужно покрасить выбранный вариант страницы с множеством выпадающих списков, цвет означает, кто предпочитает и кто доступен. Моя проблема заключается в том, что выбранные параметры не окрашены, а только параметры.jQuery - изменить выпадающий выбранный цвет на основе последнего символа

$("#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>

enter image description here

На скриншоте вы можете увидеть, что параметры окрашены, но я хочу, чтобы все это быть окрашена.

Любой гуру jQuery хочет помочь мне с этим?

источник

2014-08-29 nick gowdy

Ваш InterviewManagementForm имеет идентификатор, переключает его на класс и меняет ваш jquery с "#Inter .." на ".Inter ..". Может быть, это помогает. –

@ Olli1511 Мой селектор определенно работает, проблема в том, что я показал на скриншоте. –

я в конечном итоге делает это:

$("#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"); 
    } 
});

Потому что я выбрал вариант мне нужно немного переместиться к родительскому и цвету.

источник

2014-08-29 11:08:11

Я не знаю вашего HTML, но похоже, что вы пытаетесь добавить и удалить классы из раскрывающегося списка, а не выбранного. Вы можете добавить option:selected применить его только к выбранному элементу, так что она может выглядеть следующим образом:

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

источник

2014-08-29 10:26:40 JoelP

Я внесла изменения в функцию, и я вижу, как журнал регистрирует выбранное значение выпадающего списка. Моя проблема заключается в том, что она не добавляет класс в условие IF. –

«На скриншоте вы можете видеть, что параметры окрашены, но я хочу, чтобы все было покрашено». - Вы не заявили, что хотите покрасить выбранный вариант ** только **, а не весь выпадающий список? – JoelP

Это правда, но только потому, что эта часть логики уже работает. Я хочу, чтобы все было окрашено, но проблема в выборе варианта белого. –

jQuery - изменить выпадающий выбранный цвет на основе последнего символа

ответ

Смежные вопросы