In IE, the script does not work, hiding, showing a block

Question

HTML:

<form class = "headerOfsearch" name="search" method="post" action="search.php" > <select name="taskOption" id="d1" onchange="searchfordate();"> <option value="first">Обозначение</option> <option value="second">Дата проверки</option> <option value="third">Номер акта</option> <option value="fourth">Врем. промежуток</option> </select> <input type="search" name="query" placeholder="Поиск"> <button type="submit">Найти</button> <section style="display:none;" id="new_form"> <input type="date" name="bday"> - <input type="date" name="lday"> </section> </form>

js

  <script async="" type="text/javascript" src="http://yandex.st/jquery/2.0.3/jquery.js"></script> <script> function searchfordate() { if(d1.selectedIndex == 3){ $('#new_form').show(); } else{ $('#new_form').hide(); } } </script>

As planned, when choosing from the menu "Time interval", the line for entering the date should pop up. It works fine in chrome, but it doesn't work at all in IE11. What to do? I am completely new to this, help please

@Visman, as I understand it, to find out by indexing which user selects an element of the user
Perhaps IE does not allow access to the id from the code as a variable, try first selecting the item by id, and then manipulating it.

Visman Visman 16.2k 8 gold signs 21 silver marks 52 bronze marks · Accepted Answer · 2016-08-10T09:33:44

It is necessary to correctly determine the link to the drop-down list.

 function searchfordate() { // if(document.getElementById("d1").selectedIndex == 3) // на чистом js if($("#d1 option:selected").index() == 3) // на jQuery { $('#new_form').show(); } else { $('#new_form').hide(); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class = "headerOfsearch" name="search" method="post" action="search.php" > <select name="taskOption" id="d1" onchange="searchfordate();"> <option value="first">Обозначение</option> <option value="second">Дата проверки</option> <option value="third">Номер акта</option> <option value="fourth">Врем. промежуток</option> </select> <input type="search" name="query" placeholder="Поиск"> <button type="submit">Найти</button> <section style="display:none;" id="new_form"> <input type="date" name="bday"> - <input type="date" name="lday"> </section> </form>

Everything works, only instead of calendars with dates (as in chrome), just two input windows appear.
That is, IE does not support per se <input type = "date" name = "lday">?
@ ChebakovDmitry, judging by this data, developer.mozilla.org/en-US/docs/Web/HTML/Element/ ... and FireFox does not support it.

user192664 · Answer 2 · 2016-08-10T09:12:29

JS :

 //Исполняется после полной загрузки страницы <!--[if lt IE 9]> <script type="text/javascript"> $(window).load(function() { if(d1.selectedIndex == 3){ $('#new_form').show(); } else{ $('#new_form').hide(); } }); </script> <![endif]-->

or

 //Исполняется после построения HTML <!--[if lt IE 9]> <script type="text/javascript"> $(window).ready(function() { if(d1.selectedIndex == 3){ $('#new_form').show(); } else{ $('#new_form').hide(); } }); </script> <![endif]-->

I, most likely, quite stupid, but does not work (Do I understand correctly, what is this all over to insert into <head> </ head>?
Check the console in the browser, maybe jQuery doesn't work.

In IE, the script does not work, hiding, showing a block

2 answers 2

More articles: