Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   выпадающий список и цвета (https://javascript.ru/forum/dom-window/38482-vypadayushhijj-spisok-i-cveta.html)

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 должны быть подсвечены цветом, что нужно поправить?


Часовой пояс GMT +3, время: 22:30.