Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Прикрутить обработчик событий (https://javascript.ru/forum/misc/49160-prikrutit-obrabotchik-sobytijj.html)

Jok3r 31.07.2014 15:29

Прикрутить обработчик событий
 
Как сделать чтоб при выборе определенного города, появлялось соответственное ему описание? Понимаю что тут нужно обработчик событий вешать... но тут у меня ступор, помогите...
Или подскажите как можно реализовать по другому.

Существует форма в которой есть 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;
}

Rise 31.07.2014 15:57

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.