Подгрузка нужных элементов на страницу

@user20011993 · Регистрация: 19.10.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Имеется несколько наборов тегов div. По выбору в select пользователю нужно показывать один из наборов.
Сейчас пробую сделать так-оба набора находятся на странице, но при загрузке спрятаны. Когда пользователь выбирает нужный пункт в селекте-ему показывается соответствующий набор. Но пока не получается...
Уже пробовал по выбору добавлять/удалять класс css

CSS
1
visibility:  hidden;

и функциями

JavaScript
1
2
$('#elem').hide();
$('#elem').show();

Убирать их fadeOut'ом, но не получается-первый набор не убирается. только второй.
Подскажите как это сделать.
Заранее спасибо

@GuardCat · 29.11.2014, 23:54

user20011993, вы не приложили html? Ерунда, попробуем телепатию! Мммм... Возможно, у вас у двух или более элементов одинаковый id, тогда как он должен быть уникален.

@user20011993 · 30.11.2014, 00:45 **[ТС]**

GuardCat,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="content">
            <div id="firstst_floor">1
<!------------------------------------------------------------------------------->
                <div id="numbers3" class="number" ></div>
                <div id="numbers1" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers1" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers3" class="number"></div>
                <!----------------------------------------------->
                <div id="numbers1" class="number"></div>
                <div id="numbers3" class="number"></div>
                <div id="numbers1" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers3" class="number"></div>
            </div>
<!------------------------------------------------------------------------------->
            <div id="second_floor">2
                <div id="numbers3" class="number" ></div>
                <div id="numbers1" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers1" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers3" class="number"></div>
                <!----------------------------------------------->
                <div id="numbers1" class="number"></div>
                <div id="numbers3" class="number"></div>
                <div id="numbers1" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers2" class="number"></div>
                <div id="numbers3" class="number"></div>
            </div>
<!----------------------------------------------------------------------------->             
            
                <p>Выберите этаж</p>
                <select id="floors" onchange="show_floor()" >
                    <option value="0" selected>Ничего</option>
                    <option value="1">1 этаж</option>
                    <option value="2">2 этаж</option>
                </select>
                
            </table>            
        </div>
    </div>

@GuardCat · 30.11.2014, 11:46

Ну вот так можно:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="content">
    <div id="firstst_floor">1
        <!------------------------------------------------------------------------------->
        <div id="numbers3" class="number"></div>
        <div id="numbers1" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers1" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers3" class="number"></div>
        <!----------------------------------------------->
        <div id="numbers1" class="number"></div>
        <div id="numbers3" class="number"></div>
        <div id="numbers1" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers3" class="number"></div>
    </div>
    <!------------------------------------------------------------------------------->
    <div id="second_floor">2
        <div id="numbers3" class="number"></div>
        <div id="numbers1" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers1" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers3" class="number"></div>
        <!----------------------------------------------->
        <div id="numbers1" class="number"></div>
        <div id="numbers3" class="number"></div>
        <div id="numbers1" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers2" class="number"></div>
        <div id="numbers3" class="number"></div>
    </div>
    <!----------------------------------------------------------------------------->
    <p>Выберите этаж</p>
    <select id="floors">
        <option value="0" selected>Ничего</option>
        <option value="1">1 этаж</option>
        <option value="2">2 этаж</option>
    </select>
    </table>
</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#floors").change(function () {
    switch (this.value) {
        case "2":
            $("#firstst_floor").hide();
            $("#second_floor").show();
            break;
        case "1":
            $("#firstst_floor").show();
            $("#second_floor").hide();
            break;
        default:
            $("#firstst_floor").hide();
            $("#second_floor").hide();
    }
})

Вот пример в песочнице.

И у вас есть совпадающие id. Такого не должно быть, стоит исправить.

@user20011993 · 30.11.2014, 18:45 **[ТС]**

GuardCat, фух. это кое-как получилось. теперь чуть более сложная задача-при выборе в селекте этажа на сервер будет уходить аякс запрос с параметром, по которому из бд выдернется информация об объектах на этом этаже. теперь эту инфу надо вернуть на страницу. проблема в том, в какой форме возвращается инфа из бд. если возвращается 1 строка из бд, то там по атрибутам можно разложить руками. а когда возвращается хотя бы и 2 строки-какая будет структура у такого ответа?

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	29.11.2014, 23:54
	user20011993, вы не приложили html? Ерунда, попробуем телепатию! Мммм... Возможно, у вас у двух или более элементов одинаковый id, тогда как он должен быть уникален. 0

@user20011993 15 / 15 / 1 Регистрация: 19.10.2012 Сообщений: 570
	30.11.2014, 18:45 [ТС]
	GuardCat, фух. это кое-как получилось. теперь чуть более сложная задача-при выборе в селекте этажа на сервер будет уходить аякс запрос с параметром, по которому из бд выдернется информация об объектах на этом этаже. теперь эту инфу надо вернуть на страницу. проблема в том, в какой форме возвращается инфа из бд. если возвращается 1 строка из бд, то там по атрибутам можно разложить руками. а когда возвращается хотя бы и 2 строки-какая будет структура у такого ответа? 0