When selecting one of the options in select, the input should change the style. Initially, the input is hidden (display: none) After clicking on the option, the style changes to display: inline The following code does not work in chrome and Yandex browsers, everything is normal in the browser and IE, what could be the reason?

html

<select class="form-control"> <option onclick="click2();" value="variable1">Первая</option> <option onclick="click2();" value="variable2">Вторая</option> <option onclick="click2();" value="variable3">Третья</option> <option onclick="click2();" value="variable4">Четвёртая</option> <option onclick="click1();" value="variable5">Добавить свою</option> </select><br>

js

 <script type="text/javascript"> function click1 () { document.getElementById('test').style.display = 'inline'; } function click2 () { document.getElementById('test').style.display = 'none'; } </script>
  • Check the chrome console for errors. Look at the element - does his style change? Look at the values ​​under the document.getElementById ('test') debugger at the time the function is executed. - Trymount
  • Set the border for all items. Maybe your elements overlap each other. Different browsers can do "overlapping" in different ways. Try to raise the zIndex element - nick_n_a
  • @Trymount console is empty, as if everything is done. The style of the item does not change - sbaikov
  • @nick_n_a this option disappears. I set it as alert b, I called it, again, everything is OK in the moss, but it doesn’t show chrome - sbaikov

1 answer 1

Use the change event to track changes to the form value.

 function change() { var num = this.value[this.value.length - 1]; switch (+num) { case 5: document.getElementById('test').style.display = 'none'; break; default: document.getElementById('test').style.display = 'inline'; break; } } 
 #test { display: none; } 
 <select onchange="change.call(this)" class="form-control"> <option value="variable1">Первая</option> <option value="variable2">Вторая</option> <option value="variable3">Третья</option> <option value="variable4">Четвёртая</option> <option value="variable5">Добавить свою</option> </select> <br><br> <div id="test">Тестовый блок</div>

  • In the console displays, but still does not change the style. - sbaikov
  • @sbaikov edited the code, added a test block, can be used like this - Vasya Shmarovoz
  • Thanks, it turned out a lot easier. values ​​in case need to be quoted - sbaikov
  • @sbaikov is not at all. So they did not like in my code. In the example in switch, the variable num is plus, which converts the string to a number - Vasya Shmarovoz