Визуальное выделение выбранного в select значения средствами JQuery
Появилась необходимость визуально выделять значение селекта, в котором выбрали значение, отличное от дефолтного. То есть, на странице у меня есть несколько селектов, отвечающих за параметрический поиск по каталогу, в состоянии по умолчанию, они выглядят так:
код html:
код css:
select { width: 100%; padding: 10px 40px; background-color: #e8e8e8; border: none; color: #4c4c4c; font-family: segoe ui light; border-radius: 5px; }
Тут все просто, изменили у стандартных селектов отступы, цвет фона, и шрифт, к сожалению, средствами css больше ничего изменить нельзя. Плагины для темизации selectbox я подключать не захотел. Да, и результат более-менее меня устраивает. Далее, мне необходимо, чтобы при выборе какого-нибудь значения из селекта, селект визуально подсвечивался, как на этом скрине:
Для этого используем тяжелую артиллерию, а именно JQuery. На самом деле все просто, вот код (предварительно подключаем саму библиотеку Jquery):
$("select").each(function(index, element){ var this_select = $(element); this_select.find("option").each(function(index, element){ if( index != 0 && $(element).attr("selected") == "selected"){ this_select.css({ "background" : "#cbedbd", "border" : "1px solid #97c782", "box-shadow" : "0 0 10px rgb(151, 199, 130)" }) } }) })
Комментарии к коду
В 1 строке, мы выбираем все селекты на страницы, и перебираем их.
Во 2 строке, мы сохраняем текущий селект в переменную, это понадобится для дальнейших манипуляций.
В 3 строке, у текущего селекта мы перебираем все значения option.
В 4 строке, проверяем, что значение выбрано, и притом оно не первое, так как первое значение это дефолтное состояние
В строке с 5 по 9, мы добавляем визуальное оформление, если вышеупомянутые условия выполнены.
На этом все.
P.S. у меня на значениях селекта стоит autosubmit, поэтому при перезагрузке страницы подхватывается данное условие. Если делать без авто отправки, то нужно добавить еще одну строчку запуска функции по таймеру, тем самым скрипт будет динамически проверять условия.
С таймером код выглядит так:
function lights_select(){ $("select").each(function(index, element){ var this_select = $(element); this_select.find("option").each(function(index, element){ if( index != 0 && $(element).attr("selected") == "selected"){ this_select.css({ "background" : "#cbedbd", "border" : "1px solid #97c782", "box-shadow" : "0 0 10px rgb(151, 199, 130)" }) } }) }) setInterval(lights_select, 500); }