div зависимые от select становятся видимые при выборе

Тема в разделе "JavaScript", создана пользователем runyugin, 26 янв 2014.

Модераторы: ZiX
  1. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('#class').on('change', function() {
    ....
    }) ;
    });
    </script>

    что необходимо дописать чтоб выбранное значение делало display:block; нужному div, по умолчанию все div имеют параметр display: none;
     
  2. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    306
    Симпатии:
    43
    Т.е. у вас есть список div'ов, все невидимые?
    При каком событии определённый div должен стать видимым?
     
  3. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    при выборе из списка соответствующий див становится видимым:

    css: #stand, #aktiv, #sporti, #elektrich { display: none;}

    <select>
    <option value="standartnaya">Стандартная</option>
    <option value="aktivnaya">Активная</option>
    <option value="sportivnaya">Спортивная</option>
    <option value="elektricheskaya">Электрическая</option>
    <option value="mnogofunkcionalnaya">Многофункциональная</option>
    <option value="rychazhnaya">Рычажная</option>
    <option value="velo">Вело</option>
    </select>

    <div class="stand">...</div>
    <div class="aktiv">...</div>
    <div class="sporti">...</div>
    <div class="elektrich">...</div>
    ...

    видимость сменяется при выборе если выбирается другой option
     
  4. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    306
    Симпатии:
    43
    У себя я делал так, простым JS:
    Код:
    <body class="tundra" onload="showhidefield(document.getElementById('level')); >
    function showhidefield(obj)
    {
      if (obj != null) {
          if (obj.value!=8 && obj.value!=9){
                document.getElementById("sub_unit1").style.visibility = "hidden";
                document.getElementById("sub_unit2").style.visibility = "hidden";
                  }
            else if(obj.value==8){
                document.getElementById("sub_unit1").style.visibility = "visible";
                document.getElementById("sub_unit2").style.visibility = "hidden";
            }
    
            else if (obj.value==9){
                    document.getElementById("sub_unit2").style.visibility = "visible";
                    document.getElementById("sub_unit1").style.visibility = "hidden";
            }
        }
    }
    немного "велосипедно", но работало :)
    Под Jquery можно не сложно переделать
     
  5. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    Я так понимаю если у select всего два option еще подошло но когда их в разы больше это не покатит слишком много писать, вариант с on'change' нужен
     
  6. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    306
    Симпатии:
    43
    да нет. Можно сделать динамически. У меня слишко мудрёная реализация была...
    Пример Nr.1: http://jsfiddle.net/f4PV4/1/
    Пирмер Nr.2: http://jsfiddle.net/Sj5FN/1/
     
    Последнее редактирование: 26 янв 2014
  7. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
  8. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    306
    Симпатии:
    43
    хм... тут чистый JS и кофликтов не должно быть...
    что такое сублиматор?
    дайте ссылку на сайт, наверно дело в тэгах, и скрипт не в том месте вложен
     
  9. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
  10. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    306
    Симпатии:
    43
    Так у вас нет этих div'ов, что идут в скрипте в строках:
    Код:
    document.getElementById(