как навсегда изменить цвет шрифта / фона выбранной опции с помощью чистого JavaScript - PullRequest
Новая
       65

как навсегда изменить цвет шрифта / фона выбранной опции с помощью чистого JavaScript

0 голосов
/ 07 февраля 2019

Мне требуется, чтобы цвет шрифта / фона выбранной опции постоянно менялся , например, на красный / желтый после того, как пользователь завершил выбор.

Ограничения:

  • Код должен работать в IE11.
  • Нет jquery.Чистый JS.
  • Форма имеет идентификатор.Выборы, параметры не имеют идентификатора.
  • Форма имеет десятки вариантов выбора.
  • Решение не обязательно должно быть встроенным js.
  • Если это необходимо для решения, я могу добавить класс для выбора и / или параметров.

В качестве примера предположим, что "здоровье" было выбрано из нижеприведенного.Таким образом, «здоровье» должно отображаться красным / желтым после того, как выбор завершен, и щелкнуть на пробел на странице

Я не знаю, js.Я пробовал, как показано ниже, и не работает в ie11.Браузер JS включен.Я не смог найти подходящий для меня Q / A. 

<form id="myform" name="myform" method="post" accept-charset="utf-8">
    <select name="select1" onchange="this.options[this.selectedIndex].style.color='red'">
        <option value="0">Select</option>
        <option style="color:#333;" value="1">Health</option>
        <option value="2">Wisdom</option>
</form>
  • почему мое испытание не сработало?
  • как заставить его работать, удовлетворяя моим ограничениям?

вот ссылка на jsbin: https://jsbin.com/hubigarofa/1/edit?html,output

спасибо, с уважением

1 Ответ

0 голосов
/ 07 февраля 2019

Создайте отдельную функцию и при вызове передайте элемент этой функции, используя эту 

function a(elem)
{
document.querySelector('select').style.backgroundColor = ""
document.querySelector('select').style.color = ""
elem.options[elem.selectedIndex].style.color='red'
if(elem.value=="1")
{

document.querySelector('select').style.backgroundColor = "yellow"
document.querySelector('select').style.color = "red"
}
}
<form id="myform" name="myform" method="post" accept-charset="utf-8">
    <select name="select1" onchange="a(this)">
        <option value="0">Select</option>
        <option style="color:yellow;" value="1">Health</option>
        <option value="2">Wisdom</option>
</form>
...