jquery изменить цвет текста окна выбора при действии

У меня есть простой выбор:

<select id="sel" name="serchtype" style="background: rgba(0,0,0,1);">
<option value="white" style="color: white;">Type: All</option>
<option value="yellow" style="color: yellow;">Normal</option>
</select>

и скрипт jquery, который изменяет цвет текста поля выбора в зависимости от выбранного значения параметра

$('#sel').change( function() {
    var color = $('#sel').val();
    $('#sel').css('color',color);

});

проблема в том, что он меняет цвет выбранного текста только тогда, когда я нажимаю на любой объект за пределами поля выбора, однако мне нужно, чтобы этот цвет был изменен, просто я выбираю новое значение параметра. возможно ли использовать jquery или мне искать какой-то собственный плагин?

еще похожий вопрос: можно ли сделать фон выпадающего меню в поле выбора прозрачным?

ОБНОВЛЕНИЕ: я использую браузер OPERA v 12, в firefox/chrome такой проблемы нет.


jquery
person swserg    schedule 12.12.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы получаете значение selects и используете его в качестве цветов, но all и norm на самом деле не являются цветами, поэтому это не сработает, вам нужны фактические допустимые значения цвета

<select id="sel" name="serchtype" style="background: rgba(0,0,0,1);">
    <option value="green" style="color: white;">Type: All</option>
    <option value="purple" style="color: yellow;">Normal</option>
</select>

FIDDLE

и это кажется проще

$('#sel').on('change', function () {
    this.style.color = this.value;
});
person adeneo    schedule 12.12.2013
comment
о, извините, это были опечатки в значениях параметров, я исправил это. Теперь вы можете наблюдать на своем FIDDLE проблему, с которой я столкнулся, если вы выберете любой вариант, он не изменит цвет, пока вы не щелкнете где-нибудь еще. - person swserg; 13.12.2013
comment
Кажется, у меня все работает нормально, но опять же, параметры стиля на самом деле не кросс-браузерные, и это то, что обычно не следует делать, поскольку вы никогда не узнаете, как это получается в разных браузерах. - person adeneo; 13.12.2013
comment
Это оно! Я использую Opera (проблема здесь), только что проверил в chrome/firefox - все работает нормально. - person swserg; 13.12.2013
comment
Кстати, а как насчет прозрачного выпадающего списка? - person swserg; 13.12.2013
comment
Если вы действительно собираетесь стилизовать элемент select, его следует заменить списком (как в UL > LI), и это то, что делают все плагины, поскольку элементы select сложны, события и стили на самом деле не являются кросс-браузерными. - person adeneo; 13.12.2013