Заменяющиеся таблицы
Всем доброго времени суток.
Хочу реализовать следущее: 1) Поле-всплвающий список, скажем с 2 словами(Сегодня, Завтра) 2) Статические 2 таблицы в 2 строки и 2 колонки с данными. Необходимо, что бы например по умолчаю в поле находилось "Сегодня" и под полем была таблица "1". При выборе в поле "Завтра" таблица "1" заменялась на "2". Знающие люди, поскажите как подобное можно реализовать(желательно с примером) или возможно есть полезные ссылки, статьи, в любом случае буду очень благодарен. |
Собственно вот что имею:
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<script>
function f1()
{
var s = document.getElementById("select");
var t = document.getElementById("a1");
if(s.selectedIndex)
t.style.display = 'inline';
}
window.onload = function () { //ждем загрузки документа
var options = document.getElementById("options").children; //взять детей элемента #options
function f1() {
var index = this.options.selectedIndex // тут получается индекс выбранного элемента
for (var i = 0, l = options.length; i < l; i++) {
if (i == index) options[i].classList.add('show'); //если то-что выбрано равно номеру дитя - показать
else options[i].classList.remove('show'); //иначе - скрыть
}
}
document.getElementById("select").addEventListener('change', f1); //на это событие повесить f1
}
<input style="visibility: hidden; display: none;" class="formStatExport_input" type="text" id="statExportDateStart_input">
</script>
<select id="select" onchange = f1()>
<option>Первый вариант</option>
<option>Второй вариант</option>
<option>Третий вариант</option>
<option>Четвертый вариант</option>
<option>Пятый вариант</option>
</select>
<div id="options">
<p></p>
<input type="text" id="a1" />
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Хочу вместо таблиц вставить картинки, но пока плохо представляю как это сделать и куда. |
|
Цитата:
Для начала потребуется массив с данными. Это будет типа model. Этими данными загрузите свои списки и по событиям (типа controller) по тем же данным будете рендерить. Это типа view. Типа так понятно? :) Но вы ж никогда так не сделаете, потому что в стопицот раз проще нарисовать весь хтмл вручную, а потом с удовольствием его парсить. |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 05:10. |