Select меняющий div

(Ответов: 7, Просмотров: 2875)
  1. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    Ребята, подскажите, как сделать так чтобы при выборе определенного selecta менялось бы содержимое определенного div.
    Чтобы это работало как тут __http://www.poehalisnami.ua/. Выбрал город изменился адрес без перезагрузки страницы.
    • 0
  2. Дипломник
    • Регистрация: 10.05.2012
    • Сообщений: 100
    • Репутация: 31
    Ну... на ajax такое делается.
    Объясню примерный алгоритм, т.к. проще сделать, чем подробно объяснить.
    Если что-то непонятно - спрашивайте. Скажу, какие ссылки смотреть. Все, что надо есть в справочниках и мануалах.
    Если через jQuery реализовывать то как-то так.
    К первому селекту прикручиваем функцию по событию "change".
    Достаем из селекта значение, запихиваем в переменную и через ajax передаем на сервер.
    На сервере скрипт, который в зависимости от значения переменной, выбирает и подставляет список опций для второго селекта.
    Кстати, можно и без ajax, но получится длиииный файл с кучей списков.
    То есть примерно будет такое условие. Если значение селекта равно x, то опции для второго селекта равно y.
    Где x -переменная, y - массив.

    Если это цмс (а, скорее всего, так и есть), то у некоторых цмс есть свое API для работы с ajax (у друпал, например, вообще очень удобно такие штуки к формам прикручивать). Но алгоритм примерно одинаковый в любом случае.
    • 1

    Спасибо сказали:

    OKyJIucT(12.02.2014),
  3. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    Runa, алгоритм работы я примерно понимаю, но вот в java и в jQuery я полный ноль, поэтому и не могу реализовать...
    Думал может есть какие-то готовые решения
    • 0
  4. Дипломник
    • Регистрация: 10.05.2012
    • Сообщений: 100
    • Репутация: 31
    Думал может есть какие-то готовые решения
    Вполне может быть, что готовые решения есть. Но даже если Вы их найдете, придется немножечко повозиться с jQuery, чтобы их прикрутить.
    А на каком Вы движке работаете?

    ОФФТОП
    Какой у Вас классный ав. Лостов прям сегодня смотрела :)
    • 1

    Спасибо сказали:

    3s777(12.02.2014),
  5. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    Runa, ставлю на joomla3, с интеграцией скрипта в код сайта проблем у меня не возникнет, был бы скрипт. Просто не дружу я со всем этим java семейством, вот и думал что может кто делал нечто подобное уже...
    P.S LOST это шедевр!)
    • 0
  6. Дипломник Аватар для Tiefe
    • Регистрация: 17.12.2012
    • Сообщений: 120
    • Репутация: 18
    Примерно так на jQuery:
    Код HTML:
    <script>
            $(function(){
                $('.you-select').change(function (){
                    var selectVal = $(this).val(),
                         youDiv = $('.you-div');
                    youDiv.html(selectVal);
                });
            });
    </script>
    $('.you-select') - ваш селект с классом you-select
    $('.you-div') - див в который нужно вывести данные
    Тут при выборе определенного значения из селекта, его значение подставляется в блок $('.you-div')
    • 1

    Спасибо сказали:

    3s777(12.02.2014),
  7. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    Tiefe, чуть-чуть не подходит, т.к значение select и текст который должен будет выводится должны быть разные. Например значение select Киев, а информация должна выводится ул. Шевченко 22

    ---------- Сообщение добавлено 14:13 ---------- Предыдущее 12:46 ----------

    В общем не нашел готова решения, пришлось разбираться самому. Вот что у меня получилось и вроде работает. Выкладываю, т.к может кому нибудь пригодится:

    Код:
    <script>
    function FUNCTI(obj)
    {
    	if (obj.value=="don") {
    		div_don = document.getElementById("div_don");
    		div_don.style.display = "block";
    		div_kiev.style.display = "none";
    	}
    	else if (obj.value=="kie"){
    		div_kiev = document.getElementById("div_kiev");
    		div_kiev.style.display = "block";
    		div_don.style.display = "none";
    	}
    }
    </script>
    <select name="stat_target" class="form_select" onchange="FUNCTI(this);">
    
              <option value="don" selected="selected">Донецк</option>
              <option value="kie">Киев</option>
    
    		  </select>
    
    <div style="display: block;" class="div_donn" id="div_don">
    	<div class="bloc">
    	<div id="adress">Адрес офиса в Донецке</div>
    	<div id="phone1">тут Донецкий телефон</div>
    	</div>
    </div>
    <div style="display: none;" class="div_kievn" id="div_kiev">
    	<div class="bloc">
    	<div id="adress">Киевский адрес</div>
    	<div id="phone1">тут киевский телефон</div>
    	</div>
    </div>
    • 0
  8. [web-developer] Аватар для cOAPerator
    • Регистрация: 22.02.2011
    • Сообщений: 615
    • Репутация: 111
    • Webmoney BL: ?
    3s777 Вам Tiefe то же самое написал, только в виде анонимой функции, функа рабочая
    • 1

    Спасибо сказали:

    3s777(13.02.2014),

Похожие темы

Темы Раздел Ответов Последний пост
select и jquery
Web программирование 1 28.06.2013 20:44

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры