Форум

Alex25 · #1 (**permalink**) 09.09.2016, 11:32

Добрый день, господа!

Есть вопрос по jQuery SimpleSelect, который возник из-за появления проблемы с обработкой select'ов на сайте. Имеется форма, в которой планируется использовать два и более выпадающих списков, дело в том что первый список успешно "цепляется" библиотекой, а вот например второй никак не реагирует на попытку открыть список. Скриншот прилагаю:
http://pix.my/edit/1p7aEDcR

Сильно прошу не бить, поскольку с JS даже не на ты

рони · #2 (**permalink**) 09.09.2016, 11:45

Alex25,
id уникально!!! замените на class

Alex25 · #3 (**permalink**) 09.09.2016, 11:53

Сообщение от рони

Alex25,
id уникально!!! замените на class

Пардон, я не совсем понял

Пробовал менять название id, оставлял только class без id эффекта никакого. Расскажите подробнее пожалуйста.

рони · #4 (**permalink**) 09.09.2016, 12:03

Alex25,

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js">
    </script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type="text/javascript" src="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.js">
    </script>
    <link rel="stylesheet" type="text/css" href="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.css">
    <style type="text/css">
        body {
            padding: 10px;
            margin: 0;
            background: #fff;
            font: 14px Arial, Helvetica, Geneva, sans-serif;
            line-height: 1.5em;
            color: #3a3a3a;
        }

        body> div {
            float: left;
            margin: 40px 40px 0 0;
        }

        .answer {
            padding-top: 29px;
        }

        .answer span {
            font-weight: bold;
        }
    </style>

    <title>jQuery.SimpleSelect demo #4 by pioul</title>
    <script>
        $(window).load(function() {
            var sels = $(".example-select"),
                catBreedDisplay = $(".answer span");
            sels.each(function(indx, select) {
                $(select)
                    .simpleselect()
                    .on("change", function() {
                        catBreedDisplay.eq(indx).text(select.value);
                    });

            });

        });
    </script>
</head>

<body>
    <div>
        <label>What's your favorite cat breed?
    <select class="example-select">
      <option>
        Persian
      </option>

      <option>
        Maine Coon
      </option>

      <option>
        Exotic
      </option>

      <option>
        Siamese
      </option>

      <option>
        Abyssinian
      </option>

      <option>
        Ragdoll
      </option>

      <option>
        Birman
      </option>

      <option>
        American Shorthair
      </option>

      <option>
        Oriental
      </option>

      <option>
        Sphynx
      </option>
    </select></label>
    </div>

    <div class="answer">
        Answer: <span style="font-style: italic">Select a breed</span>
    </div>
    <div>
        <label>What's your favorite cat breed?
    <select class="example-select">
      <option>
        Persian
      </option>

      <option>
        Maine Coon
      </option>

      <option>
        Exotic
      </option>

      <option>
        Siamese
      </option>

      <option>
        Abyssinian
      </option>

      <option>
        Ragdoll
      </option>

      <option>
        Birman
      </option>

      <option>
        American Shorthair
      </option>

      <option>
        Oriental
      </option>

      <option>
        Sphynx
      </option>
    </select></label>
    </div>

    <div class="answer">
        Answer: <span style="font-style: italic">Select a breed</span>
    </div>
</body>

</html>

Alex25 · #5 (**permalink**) 12.09.2016, 11:06

Спасибо за помощь!

Проблему не решило, аналогичная проблема с ползунком http://pix.my/pZlqlIBX?1473667285 , почему то JS его не "цепляет". Суть в том что div в котором выводится данный ползунок или select из первого сообщения в теме, сделан в display:none; При выборе определенного пункта из списка в этом диве выводится контент с ползунком, который JS почему то не воспринимает. Убирал display:none; у дива, в котором выводится ползунок и все работало. Надеюсь все понятно написал. Как мне быть?

рони · #6 (**permalink**) 12.09.2016, 12:07

Сообщение от Alex25

Надеюсь все понятно написал

нет

Alex25 · #7 (**permalink**) 12.09.2016, 12:59

Сообщение от рони

нет

Тогда попробую еще раз, есть результатирующий див, куда при выборе пункта из списка выводится определенный html код, в этом html есть select, который должен "цепляться" jQuery SimpleSelect. Проблема в том что select почему то не обрабатывается jQuery SimpleSelect'ом, но только когда данный select выводится в результатирующем диве. Это пояснение к моему первому сообщению.

Alex25 · #8 (**permalink**) 12.09.2016, 13:04

Вот скриншот может так понятнее будет http://pix.my/edit/u7AG2llN
Селект, который отмечен как не рабочий, не работает только в диве result, в остальных случаях все ок. Как заставить его работать? Как сделать так чтобы jQuery SimpleSelect его увидел? )

рони · #9 (**permalink**) 12.09.2016, 13:17

Alex25,
сделайте макет минимальный, иначе к телепатам,
но обычно с display:none; помогает $(нечто).show().init().hide() - замените красное на то что вам нужно.

Alex25 · #10 (**permalink**) 13.09.2016, 11:18

Сообщение от рони

Alex25,
сделайте макет минимальный, иначе к телепатам,
но обычно с display:none; помогает $(нечто).show().init().hide() - замените красное на то что вам нужно.

Привожу минимальный

<script>
function PackackgesChange()
{
document.getElementById('result').innerHTML = document.getElementById(document.getElementById('packages-type').value).innerHTML
}
</script>
		
<form id="price-calculation-form" class="modal" action="#">
<input type="hidden" value="" name="url">
<div class="calculation-form-title"> Заявка на расчет стоимости		</div>
<label class="rounded-label-dynamic-form">Тип пакета</label><select id="packages-type" onChange="PackackgesChange()">
<option value="decide" selected="selected">Выберете тип пакета</option>
    <option value="shirt">Майка</option>
    <option value="punching">С прорубной ручкой</option>
    <option value="loop">С петлевой ручкой</option>
    <option value="paper">Бумажные</option>
</select>
<!--пакеты макайка -->
<div id="shirt" style="display: none"><div class="calculation-form-items">
<br>
<label class="rounded-label">Объем тиража</label><input class="rounded-input" id="value-calculation-form" type="text" value="" name="value" placeholder="">
<label class="rounded-label-dynamic-form">Ширина пакета</label><select id="packages-type">
    <option value="24sm" selected="selected">24</option>
    <option value="40sm">28</option>
    <option value="30sm">30</option>
    <option value="32sm">32</option>
    <option value="36sm">36</option>
    <option value="38sm">38</option>
    <option value="40sm">40</option>
    <option value="42sm">42</option>
</select>

<br>
<label class="rounded-label">Как к Вам обращатся?</label><input class="rounded-input" id="name-calculation-form" type="text" value="" name="name" placeholder="">
<label class="rounded-label">Номер вашего телефона</label><input class="rounded-input phone-mask" id="phone-calculation-form" type="text" value="" name="phone" placeholder="">
</div></div>
<div id="punching" style="display: none">Прорубка</div>
<div id="loop" style="display: none">С петлевой ручкой</div>
<div id="paper" style="display: none">Бумажный</div>

<div id="result"></div>
</form>

При выборе типа пакета из списка, идет вывод div id="shirt" в пустой <div id="result"></div> , так вот непосредственно при выводе содержимого в <div id="result"></div> , почему то не работает список с размерами пакетов, который должен обрабатываться SimpleSelect'ом.

Форум

Справочник

Discord чат

Курсы javascript