Событие для <option> , изменить шрифт текста с <option>

257
06 июля 2018, 15:20

Есть такой код:

<select>
    <option>some txt</option>
</select>

Нужно к тегу option сделать событие onclick="func()", но что-то не выходит.

P.S. Не обязательно событие - нужно, чтобы при выборе он менял шрифт текста.

Answer 1

Это на изменение состояния select,

var sel = document.querySelector('select'); 
//---------------------------------------------------------------- 
// No click only onchange event  
sel.addEventListener('change', function (e) {  
  if(sel.value == 'Audi'){ 
  // do what you need here 
   console.log('Doing....... ' + sel.value); 
  } 
  console.log('Changed ', sel.value); 
})
<select id="mySelect"> 
  <option value="Audi">Audi 
  <option value="BMW">BMW 
  <option value="Mercedes">Mercedes 
  <option value="Volvo">Volvo 
 </select>

Answer 2

Если вам нужно только менять стиль option, то можно обойтись и без js.

Изменение стиля только средствами css

select#mySelect { 
  color: red; 
} 
 
select#mySelect option:not(:checked) { 
  color: black; 
} 
 
select#mySelect2 option:checked { 
  color: red; 
}
<select id="mySelect"> 
  <option value="Audi">Audi</option> 
  <option value="BMW">BMW</option> 
  <option value="Mercedes">Mercedes</option> 
  <option value="Volvo">Volvo</option> 
</select> 
 
<select id="mySelect2"> 
  <option value="Audi">Audi</option> 
  <option value="BMW">BMW</option> 
  <option value="Mercedes">Mercedes</option> 
  <option value="Volvo">Volvo</option> 
</select>

READ ALSO
Масштабирование объекта SVG в HTML

Масштабирование объекта SVG в HTML

Подскажите, как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" внизНапример у меня...

236
Как сделать вывод имя пользователя на странице &ldquo;Спасибо&rdquo;?

Как сделать вывод имя пользователя на странице “Спасибо”?

В корне сайта на одном уровне находится главная страница: indexhtml, страница благодарности после отправки формы:thank-you-page

220
Установка границ для блока

Установка границ для блока

Осваиваю bootstrap и столкнулся с проблемойМне нужно для моих блоков (левый,правый,нижний) установить видимые границы, чтобы было четкое разделение...

222
PageSpeed Insights ругается на оптимизацию, не могу найти причину такого показателя

PageSpeed Insights ругается на оптимизацию, не могу найти причину такого показателя

PageSpeed Insights Ругается на ужасный показатель, причину того найти не могу, сжал изображения насколько это было возможно с 50 до 9мб, убрал лишний...

211