|
18.07.2014, 12:33
|
Интересующийся
|
|
Регистрация: 18.07.2014
Сообщений: 12
|
|
Изменение цвета шрифта выбранного значения select
Добрый день! Есть
<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
|
|
18.07.2014, 15:33
|
Профессор
|
|
Регистрация: 27.04.2012
Сообщений: 1,410
|
|
а сами на js что либо писали(пытались реализовать)?
|
|
18.07.2014, 16:55
|
Интересующийся
|
|
Регистрация: 18.07.2014
Сообщений: 12
|
|
Есть select, при нажатии выпадает список. Нужно как то после того как выбрал что то из списка, стало выбранным в селекте другим цветом шрифта
|
|
18.07.2014, 16:58
|
Профессор
|
|
Регистрация: 27.04.2012
Сообщений: 1,410
|
|
покажите что есть на js?
|
|
18.07.2014, 19:41
|
Интересующийся
|
|
Регистрация: 18.07.2014
Сообщений: 12
|
|
<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>
Но этот вариант не работает именно так как я хочу. Нужно что бы только выбранный вариант из списка становился красным, когда уже он выбран и список свернут
|
|
18.07.2014, 21:39
|
Профессор
|
|
Регистрация: 27.04.2012
Сообщений: 1,410
|
|
оно?
<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>
|
|
18.07.2014, 23:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Сообщение от 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>
|
|
19.07.2014, 09:47
|
Интересующийся
|
|
Регистрация: 18.07.2014
Сообщений: 12
|
|
Сообщение от рони
|
моя понял так )))
<!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>
|
Примерно так. Но можно еще сделать так, что бы после того как выбрал вариант из списка и он стал красным, когда снова открываешь список, чтобы только что выбранный вариант не выделялся красным в списке? а был такого же цвета в развернутом списке как все остальные, черным
Последний раз редактировалось AlexG88, 19.07.2014 в 09:50.
|
|
19.07.2014, 10:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Сообщение от AlexG88
|
а был такого же цвета в развернутом списке как все остальные, черным
|
$('option', this).css('color', 'black') .eq(i).css('color', i ? 'red' : 'black');
красное убрать
|
|
19.07.2014, 13:26
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 458
|
|
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>
|
|
|
|