Вход

Просмотр полной версии : выпадающий список и цвета


Alfer
03.06.2013, 21:07
Доброго времени суток, можно ли реализовать следующее и как:

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

BaVa
03.06.2013, 21:43
доброго) можно еще подкрутить, но смысл примерно такой


var options = document.getElementsByTagName("option");
for(var i = 0; i < options.length; i++)
options[i].onclick = function() {this.style.backgroundColor = "red";};


можно также достать из DOM ваш select и у него есть свойство-массив options

var list = document.getElementsByTagName("select")[0]; // или дать ему id
for(var i = 0; i < list.options.length; i++)
list.options[i].onclick = function() {this.style.backgroundColor = "red";};

можно после того как на него нажмут сделать элемент больше недоступным для выделения

var options = document.getElementsByTagName("option");
for(var i = 0; i < options.length; i++)
options[i].onclick = function() {this.style.backgroundColor="red"; this.disabled = true;}

Alfer
04.06.2013, 01:55
чудесно, но что-то не получается:

<form name="namePos">
<select name="select1" size="1">
<option>Position1</option>
<option>Position2</option>
<option>Position3</option>
</select></form>

и код JS:

<script type="text/javascript">
var options = document.getElementsByTagName("option");
for(var i = 0; i < options.length; i++)
options[i].onclick = function() {this.style.backgroundColor="red"; }
</script>

выбераю Position1, далее если выбераю Position2, то Position1 по идее должен выделятся красным цветом (в смысле посещен был уже) и т.д., что-то Ваш JS не работает

Deff
04.06.2013, 03:02
Alfer,
Cуть в том, что у option нет раздельного background,
он един для всех option и ставиться только на <select>

Поэтому подобные выпадающие cелекты с окраской эмулируют <li> списками , пробуйте поискать в Инете

BaVa
04.06.2013, 09:38
о да. оно работает только firefox и opera. не знал, извиняюсь

Alfer
04.06.2013, 18:59
Ребят, добился следующего:

<select id="posSelect">
<option value="0" >Position1</option>
<option value="1" >Position2</option>
<option value="2" >Position3</option>
<option value="3" >Position4</option>
</select>

и код JS:

<script type="text/javascript">
$('#make-it-slick').on('click', function(){
$('#posSelect').ddslick();
});

$('#restore').on('click', function(){
$('#posSelect').ddslick('destroy');
});
</script>

но есть проблема, к примеру, мы выбрали Position 3, после выбора у нас Position 3 в списке выделен, а нужно к примеру еще если мы потом выбрали Position 4, то и Position 4 и Position 3 должны быть подсвечены цветом, что нужно поправить?