Как сменить класс элемента или его 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');
    }
});

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

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .

@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