Как сделать чтоб при выборе определенного города, появлялось соответственное ему описание? Понимаю что тут нужно обработчик событий вешать... но тут у меня ступор, помогите...
Или подскажите как можно реализовать по другому.
Существует форма в которой есть 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(' ');
}
}
removeClass (node, classToRemove)
/*добавление класса*/
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;
}
