Форум

AlexG88 · #1 (**permalink**) 18.07.2014, 12:33

Добрый день! Есть

<select>
<option value="">Select with few options</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>

Подскажите функцию, которая будет изменять цвет шрифта выбранного значения select

skrudjmakdak · #2 (**permalink**) 18.07.2014, 15:33

а сами на js что либо писали(пытались реализовать)?

AlexG88 · #3 (**permalink**) 18.07.2014, 16:55

Есть select, при нажатии выпадает список. Нужно как то после того как выбрал что то из списка, стало выбранным в селекте другим цветом шрифта

skrudjmakdak · #4 (**permalink**) 18.07.2014, 16:58

покажите что есть на js?

AlexG88 · #5 (**permalink**) 18.07.2014, 19:41

<select id="sel" name="sel">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

<script>
$(function() {
$('#sel :selected').css('color', 'red');
});
</script>

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

skrudjmakdak · #6 (**permalink**) 18.07.2014, 21:39

оно?

<html>
	<head>
		<title>example</title>
	</head>
	<body>
<select class="default">
    <option value="default">Select with few options</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 <script>
var newValue;
$('select').change(function ()
	{
	if (newValue)
		newValue.css('color', 'black');
		
	newValue = $(this).find(':selected');
	newValue.css('color', 'red');
	});
 </script>
	</body>
</html>

рони · #7 (**permalink**) 18.07.2014, 23:16

Сообщение от AlexG88

Нужно что бы только выбранный вариант из списка становился красным, когда уже он выбран и список свернут

моя понял так )))

<!DOCTYPE HTML>
<html>
	<head>
		<title>example</title>
        <meta charset="utf-8">
	</head>
	<body>
<select class="default">
    <option value="default">Select with few options</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 <script>
 $('select').change(function () {
     var i = this.selectedIndex;
     $(this).css('color', i ? 'red' : '');
     $('option', this).css('color', 'black').eq(i).css('color', i ? 'red' : 'black');
 });
 </script>
	</body>
</html>

AlexG88 · #8 (**permalink**) 19.07.2014, 09:47

Сообщение от рони

моя понял так )))

<!DOCTYPE HTML>

<html>

    <head>

        <title>example</title>

        <meta charset="utf-8">

    </head>

    <body>

<select class="default">

    <option value="default">Select with few options</option>

    <option value="apple">Apple</option>

    <option value="banana">Banana</option>

    <option value="orange">Orange</option>

</select>

        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<sсript>

$('select').change(function () {

    var i = this.selectedIndex;

     $(this).css('color', i ? 'red' : '');

     $('option', this).css('color', 'black').eq(i).css('color', i ? 'red' : 'black');

});

</script>

    </body>

</html>

Примерно так. Но можно еще сделать так, что бы после того как выбрал вариант из списка и он стал красным, когда снова открываешь список, чтобы только что выбранный вариант не выделялся красным в списке? а был такого же цвета в развернутом списке как все остальные, черным

рони · #9 (**permalink**) 19.07.2014, 10:38

Сообщение от AlexG88

а был такого же цвета в развернутом списке как все остальные, черным

$('option', this).css('color', 'black').eq(i).css('color', i ? 'red' : 'black');
красное убрать

Rise · #10 (**permalink**) 19.07.2014, 13:26

AlexG88,

<style>
.n{color:black}
.y{color:red}
</style>

<select class="n" onchange="className=selectedIndex?'y':'n'">
    <option class="n" value="">Select with few options</option>
    <option class="n" value="apple">Apple</option>
    <option class="n" value="banana">Banana</option>
    <option class="n" value="orange">Orange</option>
</select>

Форум

Справочник

Discord чат

Курсы javascript