Как сменить класс элемента или его id при выборе определенного select

@Kedopers · Регистрация: 15.10.2018

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

Здравствуйте, в мучительных поисках искал ответ на этот вопрос, но в итоге не нашел его, поэтому решил обратиться сюда.

Говорю сразу, с js и jq я не особо знаком.

Суть вопроса: Как поменять класс элемента или его id(при наличии), когда выбрать один из элементов select.

Т.е. есть выпадающий список с темами, по умолчанию стоит Тема-1 (т.е уже выбрана), как сделать так, чтобы при выборе другого элемента, изменялись классы и id других элементов?

Ранее пробовал данную штуку:

JavaScript
1
2
3
4
5
6
7
8
9
10
var result = "";
            $("#tsw").val().each(function() {
                
                if (result = 1){
                    alert('1');
                }
                if (result = 2){
                    alert('2');
                }
            });

Потом такую (нашел на этом форуме):

JavaScript
1
2
3
4
5
6
7
   function test(obj){
        if (obj.selectedIndex) {
            //тут уже с помощью if или switch проверяеш значение obj.value
            if (obj.value = 1) {alert (1);}
            if(obj.value = 2){alert(2);}
        }
    }

В итоге, при выборе элемента, выполнялись оба действия. И alert 1 и alert 2.

Вот код из html, где выпадающий список

HTML5
1
2
3
4
5
6
7
<ul>
                    <li>Тема: <select name="switch-theme" id="tsw" onchange="test(this);">
                        <option selected value="1">Тема-1</option>
                        <option value="2" >Тема-2</option>
                    </select>
                    </li>
                </ul>

Надеюсь, что поможете.

Заранее спасибо!

@amr-now · 05.11.2018, 14:54

Например, для всех элементов формы

PHP/HTML
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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <ul>
        <li>Тема:
            <select name="switch-theme" id="tsw" onchange="test(this);">
                <option selected value="1">Тема-1</option>
                <option value="2">Тема-2</option>
            </select>
        </li>
    </ul>
    <form>
        <div class="Класс1">Содержание div</div>
        <input class="Класс1" />
    </form>
    <script>
        function test(obj) {
            let array = document.forms[0].elements;
            for (let i = 0; i < array.length; ++i) {
                array[i].className = "Класс" + (i + 1);
            }
        }
    </script>
</body>
</html>

@Kedopers · 05.11.2018, 15:01 **[ТС]**

Прошу прощения, но мне не совсем понятно.

Вот у меня есть две темы. Одна из которых дефолтная и имеет value в option 1.
И вторая, где value 2.
Мне нужно, чтобы скрипт менял класс какого-либо объекта (body, div и тд), при выборе определенной темы.

Получается, что там нужно использовать if-ы, но как?

@amr-now · 05.11.2018, 15:05

Исправленный вариант. Меняет классы у div и input в форме.

PHP/HTML
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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <ul>
        <li>Тема:
            <select name="switch-theme" id="tsw" onchange="test(this);">
                <option selected value="1">Тема-1</option>
                <option value="2">Тема-2</option>
            </select>
        </li>
    </ul>
    <form>
        <div class="Класс1">Содержание div</div>
        <input class="Класс1" />
    </form>
    <script>
        function test(obj) {
            let array = document.forms[0].children;
            for (let i = 0; i < array.length; ++i) {
                array[i].className = "Класс" + (obj.selectedIndex + 1);
            }
        }
    </script>
</body>
</html>

@Kedopers · 05.11.2018, 15:12 **[ТС]**

А почему в форме-то?

@amr-now · 05.11.2018, 15:31

Kedopers, покажите пример самих html-элементов, где надо поменять класс с какого и на какой.

Форма - просто для примера.

Добавлено через 1 минуту

Сообщение от Kedopers

Мне нужно, чтобы скрипт менял класс какого-либо объекта (body, div и тд), при выборе определенной темы.

В форме у двух элементов уже меняет класс.

@Kedopers · 05.11.2018, 15:49 **[ТС]**

HTML5
1
2
3
<div class="white">  <!-- смена на black -->
<p>text</p>
</div>

@amr-now · 05.11.2018, 15:58

PHP/HTML
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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <ul>
        <li>Тема:
            <select name="switch-theme" id="tsw" onchange="test(this);">
                <option selected value="1">Тема-1</option>
                <option value="2">Тема-2</option>
            </select>
        </li>
    </ul>
    <div class="colored white">
        <!-- смена на black -->
        <p>text</p>
    </div>
    <script>
        function test(obj) {
            let array = document.querySelectorAll(".colored"),
            colors=["white", "black"];
            for (let i = 0; i < array.length; ++i) {
                array[i].className = "colored " + colors[obj.selectedIndex];
            }
        }
    </script>
</body>
</html>

@Kedopers · 05.11.2018, 20:57 **[ТС]**

Спасибо

Добавлено через 4 часа 2 минуты
Если позволите, у меня еще вопрос.

Как сохранить в сессии то, что выбрал пользователь?
Т.е вот у меня функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
 function f() {
                var opt = $('select[name=switch-theme] option:selected').val();
                if (opt == 1) {
                    $(".sidebar, .colored-white, .notifytext, .content, .form, .notify, header, footer").removeClass('oops');
                    $("body").removeClass('black-b');
                }
                if (opt == 2) {
                    $(".sidebar, .colored-white, .notifytext, .content, .form, .notify, header, footer").addClass('oops');
                    $("body").addClass('black-b');
                }
            }

Которая срабатывает при изменении в форме:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
                    <li>Пункт - 1</li>
                    <li>Пункт - 2</li>
                    <li>Тема:
                        <form class='sele'> <select name="switch-theme" id="tsw" onchange="f();">
                        <option selected value="1">Тема-1</option>
                        <option value="2" >Тема-2</option>
                    </select>
                        </form>
                    </li>
                    <li><a href="ex.php">Выйти</a></li>
                </ul>

И как сохранить в сессии то, что было выбрано пользователем ранее, и чтобы при перезагрузке все осталось так же, как после выбора селекта?

*При выборе селекта, у меня меняются цвета фонов и тд. Их надо сохранить после перезагрузки страницы

@Satansoft · 05.11.2018, 22:45

Чуваак, ты мог просто вынести стили тех элементов, где переменная стилизация в отдельные файлы и просто подключать их) При этом классы бы не менялись, а менялись бы стили, которые ты на них навешиваешь) А последний файл стилей загружал бы в localStorage, а если там до этого ничего не было, грузил бы дефолтный файл)

@Kedopers · 05.11.2018, 23:00 **[ТС]**

Решил вопрос с сохранением значения после перезагрузки страницы.
Если кому интересно, то вот код js

*Может быть немного по колхозному, но по-другому я не знаю как можно сделать.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
    var them = get_cookie('theme');
    if (them == 1) {
        $("#tsw").val(1);
        $(".sidebar, .colored-white, .notifytext, .content, .form, .notify, header, footer").removeClass('oops');
        $("body").removeClass('black-b');
    }
    if (them == 2) {
        $("#tsw").val(2);
        $(".sidebar, .colored-white, .notifytext, .content, .form, .notify, header, footer").addClass('oops');
        $("body").addClass('black-b');
    }
});

Тема закрыта.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Kedopers 0 / 0 / 0 Регистрация: 15.10.2018 Сообщений: 12
	05.11.2018, 15:01 [ТС]
	Прошу прощения, но мне не совсем понятно. Вот у меня есть две темы. Одна из которых дефолтная и имеет value в option 1. И вторая, где value 2. Мне нужно, чтобы скрипт менял класс какого-либо объекта (body, div и тд), при выборе определенной темы. Получается, что там нужно использовать if-ы, но как? 0

@Kedopers 0 / 0 / 0 Регистрация: 15.10.2018 Сообщений: 12
	05.11.2018, 15:12 [ТС]
	А почему в форме-то? 0

@Satansoft 20 / 16 / 7 Регистрация: 27.02.2012 Сообщений: 742
	05.11.2018, 22:45
	Чуваак, ты мог просто вынести стили тех элементов, где переменная стилизация в отдельные файлы и просто подключать их) При этом классы бы не менялись, а менялись бы стили, которые ты на них навешиваешь) А последний файл стилей загружал бы в localStorage, а если там до этого ничего не было, грузил бы дефолтный файл) 0