Прикрутить обработчик событий
Как сделать чтоб при выборе определенного города, появлялось соответственное ему описание? Понимаю что тут нужно обработчик событий вешать... но тут у меня ступор, помогите...
Или подскажите как можно реализовать по другому. Существует форма в которой есть select <select name="TOURINC" class="TOURINC" autocomplete="off"> <option value="0">----</option> <option value="58">ISTANBUL</option> <option value="70">BEIJING</option> <option value="69">KHARKIV</option> <option value="68">LONDON</option> <option value="67">ANTALIA</option> </select> /*в css class="hide_text" по умолчанию скрывает данный DIV*/ <div id="info_tours"> <div id="58" class="hide_text">ISTANBUL - описание бла, бла, бла...</div> <div id="70" class="hide_text">BEIJING- описание бла, бла, бла...</div> <div id="69" class="hide_text">KHARKIV- описание бла, бла, бла...</div> <div id="68" class="hide_text">LONDON- описание бла, бла, бла...</div> <div id="67" class="hide_text">ANTALIA- описание бла, бла, бла...</div> </div> Есть скрипт var tourValue = document.getElementsByName('TOURINC') var id_tour = tourValue[0].value var node = document.getElementById(id_tour); // скрытый div у которого id равен value значению var classToRemove = "hide_text"; var classToAdd = "hide_text"; /*Удаление класса*/ function removeClass(node, classToRemove) { "use strict"; var arrayClassName = [].slice.call(node.classList); for (var i = 0; i < arrayClassName.length;) { if (arrayClassName[i] === classToRemove) { arrayClassName.splice([i], 1) } else { i++ } } if (typeof(arrayClassName[0]) === "undefined") { return node.removeAttribute("class") } else { return node.className = arrayClassName.join(' '); } } /*добавление класса*/ function addClass(node, classToAdd) { "use strict"; var arrayClassName = [].slice.call(node.classList); for (var i = 0; i < arrayClassName.length; i++) { if (arrayClassName[i] === classToAdd) { return node.className; } } return node.className = node.className + " " + classToAdd; } |
Jok3r, можно так:
<style> .hide_text{display:none} .show_text{display:block} </style> <select name="TOURINC" class="TOURINC" autocomplete="off" onchange="tour(this)"> <option value="0">----</option> <option value="58">ISTANBUL</option> <option value="70">BEIJING</option> <option value="69">KHARKIV</option> <option value="68">LONDON</option> <option value="67">ANTALIA</option> </select> <div id="info_tours"> <div id="58" class="hide_text">ISTANBUL - описание бла, бла, бла...</div> <div id="70" class="hide_text">BEIJING- описание бла, бла, бла...</div> <div id="69" class="hide_text">KHARKIV- описание бла, бла, бла...</div> <div id="68" class="hide_text">LONDON- описание бла, бла, бла...</div> <div id="67" class="hide_text">ANTALIA- описание бла, бла, бла...</div> </div> <script> function tour(select){ var info = document.getElementById('info_tours').children; for (var i = 0; i < info.length; i++) { info[i].className = (select.value == info[i].id) ? 'show_text' : 'hide_text'; } } </script> |
Часовой пояс GMT +3, время: 00:09. |