Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Разные стили в нутри OPTION

Автор: Gold Dragon 22.10.2014, 12:57

Есть к примеру код

Код


<select id="oi_list_change" name="oi_list_change">
<option value="8">[ID:8] ВП-400 : гт</option>
<option value="9">[ID:9] ВП-540 : гт</option>
<option value="179">[ID:179] ВП-509 : ки</option>
<option value="180">[ID:180] ВП-514 : ки</option>
<option value="261">[ID:261] АРМ-1 : ки</option>
<option value="262">[ID:262] АРМ-2 : ки</option>
</select>

Необходимо [ID:xxx] сделать другим стилем, например другим цветом.

Вопрос: как?

Автор: BaNru 24.10.2014, 01:38

На CSS нельзя по "тексту" что-то менять.
Вот по value можно

Код

option[value="180"] {
   color:red;
}

Если тебе надо именно по тексту, то это на JS только
http://jsfiddle.net/BaNru/za689v00/ (оба варианта)

Или вот поправил, чуть упростил:
http://jsfiddle.net/BaNru/za689v00/1/

Автор: _zorn_ 24.10.2014, 01:55

Я думаю тут имеется ввиду стиль на часть текста в оптион.
Например "[ID:8]" красным, а "ВП-400 : гт" синим.

Автор: Gold Dragon 24.10.2014, 07:30

Цитата(_zorn_ @ 24.10.2014, 02:55

)

Я думаю тут имеется ввиду стиль на часть текста в оптион.
Например "[ID:8]" красным, а "ВП-400 : гт" синим.

Именно! ... вроде так и написал smile

Цитата(BaNru @ 24.10.2014, 02:38

)

На CSS нельзя по "тексту" что-то менять.

не факт, но всё равно без разницы как: хоть на JS, хоть ещё как-то

Есть мысль превратить конструкцию в <ul><li>, но что-то навороченное слишком получается, да и остальной код придутся "латать"

Автор: _zorn_ 24.10.2014, 10:34

Можно например так http://jsbin.com/jevagigile/edit?html,css,js,output
Думаю принцип будет понятен.

Код


selects[i].style.display = 'none';

специально закомментил чтобы понятнее было что происходит

Автор: Gold Dragon 24.10.2014, 12:05

_zorn_, +1!!! Именно то что искал и хотел...!

Автор: Gold Dragon 24.10.2014, 12:31

и даже меняет индекс у option smile

думал допиливать нужно...

И в качестве развития мысли, хочу (что уж теперь, гулять так гулять smile

)
1. Сделать это в виде плагина для jQuery
2. Сделать возможность задавать шаблон (регулярку)

Попробую сам конечно, о не откажусь от помощи.. Не так силён в JS как в PHP smile

Можно, например активировать как-то так

Код


$('select#oi_list_change').zornplugin({
       apply : 'style'
});

или

Код


$('select#oi_list_change').zornplugin({
       apply    : 'regular',
       pattern : '\[ID:\d+\]\s*',
       class     : 'dropdown-wrapper'
 });

Автор: _zorn_ 28.10.2014, 04:59

jQuery только недавно начал изучать smile

Ну попробую наваять smile

Автор: _zorn_ 28.10.2014, 08:52

Готово. Можно еще всяких эффектов навесить вместо обычного toggle но я уже не стал заморачиваться.

Автор: Gold Dragon 6.11.2014, 14:07

_zorn_, всё просто СУПЕР!!!
всё очень просто и главное работает smile

Добавлено через 7 минут и 10 секунд
маленькое замечание.. при потере фокуса или вызове другого SELECT, текущий должен свернуться.. Как правильно это организовать?

Автор: _zorn_ 7.11.2014, 03:03

При раскрытии списка запоминать открываемый список в переменную которая изначально пустая.
Соответственно перед раскрытием, если она не пустая, скрывать.