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

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

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

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

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

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

HTML5

<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

<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

    <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

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

<!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

<!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, спасибо и низкий поклон тебе!!!

@PiVar 0 / 0 / 0 Регистрация: 10.02.2015 Сообщений: 7
	10.02.2015, 19:44 [ТС]	3
	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 [ТС]	5
	ПОТРЯСАЮЩЕ! Блин, ковырялся почти сутку не засыпая а тут вон в чём дело оказалось) LASSO, спасибо и низкий поклон тебе!!! 0

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

Решение