Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавить скриптом классы на option (https://javascript.ru/forum/misc/63944-dobavit-skriptom-klassy-na-option.html)

Quark_ 10.07.2016 12:15
Добавить скриптом классы на option
 
Помогите написать скрипт, чтобы при загрузке страницы на каждую option добавлялся свой индивидуальный класс (использую джумловский модуль и он не дает их прописать сразу в html).

<div class="control-group">
   {element label="Услуга" type="select"}
      {option label="Услуга 1" value="Услуга 1" /}
      {option label="Услуга 2" value="Услуга 2" /}
      {option label="Услуга 3" value="Услуга 3" /}
      {option label="Услуга 4" value="Услуга 4" /}
      {option label="Услуга 5" value="Услуга 5" /}
   {/element}
</div>

ruslan_mart 10.07.2016 22:36
Quark_, на option ничего не должно быть кроме value.

warren buffet 10.07.2016 23:48
Да просто заменить label на class. Все равно ни про какой атрибут label хтмл не знает.

Quark_ 11.07.2016 08:32
Цитата:
Сообщение от Ruslan_xDD (Сообщение 421742)
Quark_, на option ничего не должно быть кроме value.
Ruslan_xDD, дело в том, что мне надо, например при выборе опции "Услуга 3" сделать видимым дополнительный блок, т.о. я планировал через display: none/block;
А как для скрипта, который будет менять стили по клику указать, какая именно опция выбрана - не понимаю.

Quark_ 11.07.2016 08:33
Цитата:
Сообщение от warren buffet (Сообщение 421748)
Да просто заменить label на class. Все равно ни про какой атрибут label хтмл не знает.
Не поможет т.к. использую модуль джумловский (Simpleform 2), от стирает class или id для опции с фронта при загрузке страницы.

Quark_ 11.07.2016 08:39
Можно ли при такой структуре:
<div class="control-group">
   {element label="Услуга" type="select"}
      {option label="Услуга 1" value="Услуга 1" /}
      {option label="Услуга 2" value="Услуга 2" /}
      {option label="Услуга 3" value="Услуга 3" /}
      {option label="Услуга 4" value="Услуга 4" /}
      {option label="Услуга 5" value="Услуга 5" /}
   {/element}
</div>

<div class="blocks">
<div class="Услуга 1"></div>
<div class="Услуга 2"></div>
<div class="Услуга 3"></div>
<div class="Услуга 4"></div>
<div class="Услуга 5"></div>
</div>


как-то на основе этого скрипта сделать, чтобы при выборе опции на соответствующий div также добавлялся класс, например selected?
$('select').change(function(){
    $(this).find(':selected').addClass('selected')
           .siblings('option').removeClass('selected');
});

рони 11.07.2016 10:51
Цитата:
Сообщение от Quark_
выборе опции на соответствующий div также добавлялся класс,
 
$('select').change(function(){
    $('.blocks > div').removeClass('selected')
    .eq(this.selectedIndex || 0).addClass('selected')
});

Quark_ 11.07.2016 12:13
Цитата:
Сообщение от рони (Сообщение 421771) 
$('select').change(function(){
    $('.blocks > div').removeClass('selected')
    .eq(this.selectedIndex || 0).addClass('selected')
});
THX, то, что нужно)


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