При выборе select показывать последующий DIV не в зависимости от value и прочей "ерунды"

@PiVar · Регистрация: 10.02.2015

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

Уважаемые профессионалы и профессиональные любители!

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

Есть список(select):

HTML5
1
2
3
4
5
6
7
<select id="steklo_12" >
    <option value="0" selected="selected">Стандартное стекло</option>
    <option value="1">Нестандартное стекло</option>
    <option value="2">Супер нестандартное стекло</option>
    <option value="3">и ещё бог знает какое стекло, таких стекол может быть куча</option>
    ...
</select>

И есть блоки div:

HTML5
1
2
3
4
5
6
<div class="blockDiv">
<div class="divSteklo_0" style="display: block;"><img src="./прозрачное-стекло-0.jpg" /></div>
<div class="divSteklo_1" style="display: none;"><img src="./стекло-1.jpg" /></div>
<div class="divSteklo_2" style="display: none;"><img src="./стекло-2.jpg" /></div>
<div class="divSteklo_3" style="display: none;"><img src="./стекло-3.jpg" /></div>
</div>

И есть джаваскрипта, которая всё это дело(что выше) связывает:

JavaScript
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
    <script type="text/javascript">
        jQuery(document).ready(function () {
          var opt = (window.location.search).replace("?", ""),
          select = document.getElementById("steklo_12"),
          options = select.options;
          for (var i = 0; i < options.length; i++) { if (options[i].id == opt) {break;} }
          i = 0 //с какого блока показывать
          select.selectedIndex = i;
          function go2() {
            var b = {
            0: ".divSteklo_0",
            1: ".divSteklo_1",
            2: ".divSteklo_2",
            3: ".divSteklo_3"
            ....
            }, c = select.selectedIndex,
            a;
            for (a in b)
            {var elems = document.querySelectorAll(b[a]);
              Array.prototype.forEach.call(elems, function(el)
                { el.style.display = c == a? "block": "none" }
              );
            }
          };
          select.onchange = go2;
          go2.call(select);
          
        });
    </script>

Прикол тут в следующем:
Хочу замутить так, чтобы при выборе option, допустим option по счёту 3й и чтобы открывался DIV(т.е. display:block был) который по счёту тоже 3й, кол-во option-ов и DIV-ов всегда одинаковое - я почти добился такого "эффекта" но вот эта конструкция:

JavaScript
1
2
3
4
5
6
7
var b = {
            0: ".divSteklo_0",
            1: ".divSteklo_1",
            2: ".divSteklo_2",
            3: ".divSteklo_3"
            ....
            }

...меня просто убивает, можно ли сделать какой нибудь массив/цикл, чтобы не прописывать в дебильной конструкции(которая выше) классы (divSteklo_3, divSteklo_4....) а чтобы допустим эти классы сами добавлялись так сказать динамически(от того, сколько дивов)?
Я в этом деле олень, так что прошу не дёргать за рога а направить на путь истинный - я очень-приочень прошу помощи, а то на голове почти волос не осталось и те уже посидели;((

@Vadim_Lasso · 10.02.2015, 19:20

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
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
<body>
    <select id="steklo_12" >
        <option value="0" selected="selected">Стандартное стекло</option>
        <option value="1">Нестандартное стекло</option>
        <option value="2">Супер нестандартное стекло</option>
        <option value="3">и ещё бог знает какое стекло, таких стекол может быть куча</option>
    </select>
    <div class="blockDiv">
        <div class="divSteklo_0" style="display: block;"><img src="./прозрачное-стекло-0.jpg" alt="стекло-0" /></div>
        <div class="divSteklo_1" style="display: none;"><img src="./стекло-1.jpg" alt="стекло-1" /></div>
        <div class="divSteklo_2" style="display: none;"><img src="./стекло-2.jpg" alt="стекло-2" /></div>
        <div class="divSteklo_3" style="display: none;"><img src="./стекло-3.jpg" alt="стекло-3" /></div>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#steklo_12').change(function() {
                $('.blockDiv div').hide();
                $('.blockDiv div:eq(' + $(this).val() + ')').show();
            });
        });
    </script>
</body>
</html>

Тест: https://jsfiddle.net/vadim_Lasso/vo2aqqvg/1/

@PiVar · 10.02.2015, 19:44 **[ТС]**

LASSO Спасибо тебе большое, но немного не то, вот можно сделать так чтобы option и div не связывались по этому параметру $(this).val(), просто value у option может быть разная(не обязательно числовая) - вот исходя из этого и надо, чтобы option и div связывались по допустим index-у т.е. выбрал кто нибудь option по порядку идущий вторым и открывается div по порядку 2 ну и 3,4 и т.д., у меня мозгов не хватает так сделать, может чем подскажешь на этот счёт?...заранее спасибо!

@Vadim_Lasso · 10.02.2015, 21:22

Просто поменять $(this).val() на $(this)[0].selectedIndex

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
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
<body>
    <select id="steklo_12" >
        <option value="0" selected="selected">Стандартное стекло</option>
        <option value="1">Нестандартное стекло</option>
        <option value="2">Супер нестандартное стекло</option>
        <option value="3">и ещё бог знает какое стекло, таких стекол может быть куча</option>
    </select>
    <div class="blockDiv">
        <div class="divSteklo_0" style="display: block;"><img src="./прозрачное-стекло-0.jpg" alt="стекло-0" /></div>
        <div class="divSteklo_1" style="display: none;"><img src="./стекло-1.jpg" alt="стекло-1" /></div>
        <div class="divSteklo_2" style="display: none;"><img src="./стекло-2.jpg" alt="стекло-2" /></div>
        <div class="divSteklo_3" style="display: none;"><img src="./стекло-3.jpg" alt="стекло-3" /></div>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#steklo_12').change(function() {
                $('.blockDiv div').hide();
                $('.blockDiv div:eq(' + $(this)[0].selectedIndex + ')').show();
            });
        });
    </script>
</body>
</html>

Тест: https://jsfiddle.net/vadim_Lasso/vo2aqqvg/2/

@PiVar · 10.02.2015, 21:32 **[ТС]**

ПОТРЯСАЮЩЕ

! Блин, ковырялся почти сутку не засыпая а тут вон в чём дело оказалось) LASSO, спасибо и низкий поклон тебе!!!

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@PiVar 0 / 0 / 0 Регистрация: 10.02.2015 Сообщений: 7
	10.02.2015, 19:44 [ТС]
	LASSO Спасибо тебе большое, но немного не то, вот можно сделать так чтобы option и div не связывались по этому параметру $(this).val(), просто value у option может быть разная(не обязательно числовая) - вот исходя из этого и надо, чтобы option и div связывались по допустим index-у т.е. выбрал кто нибудь option по порядку идущий вторым и открывается div по порядку 2 ну и 3,4 и т.д., у меня мозгов не хватает так сделать, может чем подскажешь на этот счёт?...заранее спасибо! 0

@PiVar 0 / 0 / 0 Регистрация: 10.02.2015 Сообщений: 7
	10.02.2015, 21:32 [ТС]
	ПОТРЯСАЮЩЕ! Блин, ковырялся почти сутку не засыпая а тут вон в чём дело оказалось) LASSO, спасибо и низкий поклон тебе!!! 0

При выборе select показывать последующий DIV не в зависимости от value и прочей "ерунды"

Решение