Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2014, 23:35
Новичок на форуме
Отправить личное сообщение для Ostap_b Посмотреть профиль Найти все сообщения от Ostap_b
 
Регистрация: 16.01.2014
Сообщений: 3

Заменяющиеся таблицы
Всем доброго времени суток.
Хочу реализовать следущее:
1) Поле-всплвающий список, скажем с 2 словами(Сегодня, Завтра)
2) Статические 2 таблицы в 2 строки и 2 колонки с данными.

Необходимо, что бы например по умолчаю в поле находилось "Сегодня" и под полем была таблица "1". При выборе в поле "Завтра" таблица "1" заменялась на "2".

Знающие люди, поскажите как подобное можно реализовать(желательно с примером) или возможно есть полезные ссылки, статьи, в любом случае буду очень благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2014, 21:39
Новичок на форуме
Отправить личное сообщение для Ostap_b Посмотреть профиль Найти все сообщения от Ostap_b
 
Регистрация: 16.01.2014
Сообщений: 3

Собственно вот что имею:
<!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>

Хочу вместо таблиц вставить картинки, но пока плохо представляю как это сделать и куда.
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2014, 23:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Ostap_b,
Скрыть/показать элементы в зависимости от значения select ов (нескольких)
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2014, 01:45
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от Ostap_b
1) Поле-всплвающий список, скажем с 2 словами(Сегодня, Завтра)
А по-моему это называется drop down list. И википедия так считает http://en.wikipedia.org/wiki/Drop-down_list

Для начала потребуется массив с данными. Это будет типа model. Этими данными загрузите свои списки и по событиям (типа controller) по тем же данным будете рендерить. Это типа view. Типа так понятно?

Но вы ж никогда так не сделаете, потому что в стопицот раз проще нарисовать весь хтмл вручную, а потом с удовольствием его парсить.
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2014, 15:01
Новичок на форуме
Отправить личное сообщение для Ostap_b Посмотреть профиль Найти все сообщения от Ostap_b
 
Регистрация: 16.01.2014
Сообщений: 3

Сообщение от рони Посмотреть сообщение
Ostap_b,
Скрыть/показать элементы в зависимости от значения select ов (нескольких)
Огромнейшее спасибо, очень помогло и задача собственно решена.

Сообщение от kostyanet Посмотреть сообщение
А по-моему это называется drop down list. И википедия так считает http://en.wikipedia.org/wiki/Drop-down_list

Для начала потребуется массив с данными. Это будет типа model. Этими данными загрузите свои списки и по событиям (типа controller) по тем же данным будете рендерить. Это типа view. Типа так понятно?

Но вы ж никогда так не сделаете, потому что в стопицот раз проще нарисовать весь хтмл вручную, а потом с удовольствием его парсить.
Что тут скажешь, мы не ищем легких путей при обучении.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
фильтрация .csv таблицы br1ck Элементы интерфейса 0 13.11.2013 08:35
Задать имя таблицы в SELECT из переменной rudolfe Серверные языки и технологии 7 24.06.2013 16:46
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 22:33
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35