Перейти к содержимому


Фотография
- - - - -

div зависимые от select


Лучший Ответ runyugin , 27 January 2014 - 10:06

все работает сам ступил были дубли селекторов, которые перехватывали походу

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 6

#1 runyugin

runyugin

Отправлено 25 January 2014 - 19:48

   <script type="text/javascript">
        jQuery(document).ready(function() {
           jQuery('#class').on('change', function() {
          ....
           }) ;
        });
    </script>

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


Сообщение отредактировал runyugin: 25 January 2014 - 19:49

  • 0

#2 Cheren-dow

Cheren-dow

Отправлено 26 January 2014 - 11:32

Здравствуйте попробуйте так

<script type="text/javascript">
        jQuery(document).ready(function() {
           jQuery('#class').on('change', function() {
              jQuery('#my_block').show();
           }) ;
        });
    </script>

Сообщение отредактировал Cheren-dow: 26 January 2014 - 11:33

  • 0
Изображение
 

#3 runyugin

runyugin

Отправлено 26 January 2014 - 12:18

Ага Работает Спасибо! а для определенного выбранного option в селекте соответствующий div открывать а предыдущий скрывать как можно былобы реализовать?


  • 0

#4 runyugin

runyugin

Отправлено 26 January 2014 - 12:37

или вот еще нашел решение но не могу доделать.... как в select добавить onChange="javascript: go(this); не нашел в элементе.

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Untitled Document</title>
    <script type="text/javascript">
     function go(i_page)
      {
        var val_i_page = i_page.value;
        document.getElementById('i_page1').style.display=(val_i_page==0) ? "" : "none";
        document.getElementById('pos-tech').style.display=(val_i_page=="standartnaya") ? "" : "none";
        document.getElementById('dop-pos-tech').style.display=(val_i_page==2) ? "" : "none";
      }
    </script>
    </head>
    </body>
    </html>
    <body>
     
    <select onChange="javascript: go(this);">
    <option value="0"> город </option>
    <option value="standartnaya"> область </option>
    <option value="2"> страны </option>
    </select>
    <br><br><br><br>
     
    <div id="i_page1">
    Районы города<br>
    <select>
    <option> 1 район города </option>
    <option> n район города </option>
    </select>
    </div>
     
    <div id="pos-tech" style="display: none">
    Города области<br>
    <select>
    <option> 1 город области </option>
    <option> n город области </option>
    </select>
    </div>

    <div id="dop-pos-tech" style="display: none">
    Страны<br>
    <select>
    <option> ef </option>
    <option> n город области </option>
    </select>
    </div>
     
    </body>
    </html>

Прикрепленные изображения

  • Untitled-1.png

Сообщение отредактировал runyugin: 26 January 2014 - 12:37

  • 0

#5 Cheren-dow

Cheren-dow

Отправлено 26 January 2014 - 13:59

Проверяете выбранное значение через $("#myselect").val(); и потом условиями if делаете какие то действия.

P/S Почитайте документацию jQuery что бы разобраться 


Сообщение отредактировал Cheren-dow: 26 January 2014 - 14:00

  • 0
Изображение
 

#6 runyugin

runyugin

Отправлено 26 January 2014 - 19:29

Найдено решение, тестово работает но в zoo непашет:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<select id="elements6f39d176-a9e7-42b5-8a9a-4953e73809d8option" name="elements[6f39d176-a9e7-42b5-8a9a-4953e73809d8][option][]">
    <option value="">-Выбрать Тип коляски-</option>
    <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 id="aktivnoya-pos-tech"  style="display: none;">Hello hidden content</div>
<div id="sportivnaya-pos-tech" style="display: none;">Hello hidden2</div>
<div id="elektricheskaya-pos-tech" style="display: none;">Hello3</div>
<div id="mnogofunkcionalnaya-pos-tech" style="display: none;">Hello4</div>
<div id="rychazhnaya-pos-tech" style="display: none;">Hello5</div>
<div id="velo-pos-tech" style="display: none;">Hello6</div>


<script type='text/javascript'>


document.getElementById('elements6f39d176-a9e7-42b5-8a9a-4953e73809d8option').addEventListener('change', function () {
    var style = this.value == "aktivnaya" ? 'block' : 'none';
    document.getElementById('aktivnoya-pos-tech').style.display = style;
    var style = this.value == "sportivnaya" ? 'block' : 'none';
    document.getElementById('sportivnaya-pos-tech').style.display = style;
        var style = this.value == "elektricheskaya" ? 'block' : 'none';
    document.getElementById('elektricheskaya-pos-tech').style.display = style;
    var style = this.value == "mnogofunkcionalnaya" ? 'block' : 'none';
    document.getElementById('mnogofunkcionalnaya-pos-tech').style.display = style;
    var style = this.value == "rychazhnaya" ? 'block' : 'none';
    document.getElementById('rychazhnaya-pos-tech').style.display = style;
    var style = this.value == "velo" ? 'block' : 'none';
    document.getElementById('velo-pos-tech').style.display = style;

});
</script>
</body>
</html>

http://allwheelchair...v-razdel-prakat

Прикрепленные изображения

  • Untitled-1.png

  • 0

#7 runyugin

runyugin

Отправлено 27 January 2014 - 10:06   Лучший Ответ

все работает сам ступил были дубли селекторов, которые перехватывали походу


  • 0




Click to return to top of page in style!