т.е. selected по умолчанию стоит одним цветом, а выбранные пункты другим в самом select
2 ответа
Вот небольшая демонстрация со сменой цвета и текста из списка:
<select class="change_color">
<option value="">Выберите цвет</option>
<option value="green">Привет , я зеленый цвет</option>
<option value="blue">Привет , я синий цвет</option>
<option value="red">Привет , я красный цвет</option>
<option value="yellow">Привет , я желтый цвет</option>
</select>
<h1 class='show_text'>Текст по умолчанию</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".change_color").on('change',function(e)
{
var color = $(this).val();
var text = $(this).find('option:selected').text();
$(this).css('color',color);
$('.show_text').css('color',color);
$('.show_text').text(text);
});
});
</script>
Вот пример как можно это сделать с помощью jQuery
. У каждого option
добавил атрибут data-color
в котором записал цвет. Задал обработчик для select
onchage
, и при смене option
добавил цвет текста для select
, взятый из текущего option
.
$(document).ready(function(){
$('select').on('change',function(){
$(this).css({color: $(this).find('option:selected').data('color')});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name"test">
<option value="chage color" data-color="black">change color</option>
<option value="red" data-color="red">red</option>
<option value="green" data-color="green">green</option>
<option value="blue" data-color="blue">blue</option>
</select>