Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2016, 11:32
Новичок на форуме
Отправить личное сообщение для Alex25 Посмотреть профиль Найти все сообщения от Alex25
 
Регистрация: 09.09.2016
Сообщений: 8

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

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

Сильно прошу не бить, поскольку с JS даже не на ты
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2016, 11:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alex25,
id уникально!!! замените на class
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2016, 11:53
Новичок на форуме
Отправить личное сообщение для Alex25 Посмотреть профиль Найти все сообщения от Alex25
 
Регистрация: 09.09.2016
Сообщений: 8

Сообщение от рони Посмотреть сообщение
Alex25,
id уникально!!! замените на class
Пардон, я не совсем понял Пробовал менять название id, оставлял только class без id эффекта никакого. Расскажите подробнее пожалуйста.
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2016, 12:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

jquery.simpleselect подключение нескольких select
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>
Ответить с цитированием
  #5 (permalink)  
Старый 12.09.2016, 11:06
Новичок на форуме
Отправить личное сообщение для Alex25 Посмотреть профиль Найти все сообщения от Alex25
 
Регистрация: 09.09.2016
Сообщений: 8

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

Проблему не решило, аналогичная проблема с ползунком http://pix.my/pZlqlIBX?1473667285 , почему то JS его не "цепляет". Суть в том что div в котором выводится данный ползунок или select из первого сообщения в теме, сделан в display:none; При выборе определенного пункта из списка в этом диве выводится контент с ползунком, который JS почему то не воспринимает. Убирал display:none; у дива, в котором выводится ползунок и все работало. Надеюсь все понятно написал. Как мне быть?
Ответить с цитированием
  #6 (permalink)  
Старый 12.09.2016, 12:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Alex25
Надеюсь все понятно написал
нет
Ответить с цитированием
  #7 (permalink)  
Старый 12.09.2016, 12:59
Новичок на форуме
Отправить личное сообщение для Alex25 Посмотреть профиль Найти все сообщения от Alex25
 
Регистрация: 09.09.2016
Сообщений: 8

Сообщение от рони Посмотреть сообщение
нет
Тогда попробую еще раз, есть результатирующий див, куда при выборе пункта из списка выводится определенный html код, в этом html есть select, который должен "цепляться" jQuery SimpleSelect. Проблема в том что select почему то не обрабатывается jQuery SimpleSelect'ом, но только когда данный select выводится в результатирующем диве. Это пояснение к моему первому сообщению.
Ответить с цитированием
  #8 (permalink)  
Старый 12.09.2016, 13:04
Новичок на форуме
Отправить личное сообщение для Alex25 Посмотреть профиль Найти все сообщения от Alex25
 
Регистрация: 09.09.2016
Сообщений: 8

Вот скриншот может так понятнее будет http://pix.my/edit/u7AG2llN
Селект, который отмечен как не рабочий, не работает только в диве result, в остальных случаях все ок. Как заставить его работать? Как сделать так чтобы jQuery SimpleSelect его увидел? )
Ответить с цитированием
  #9 (permalink)  
Старый 12.09.2016, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alex25,
сделайте макет минимальный, иначе к телепатам,
но обычно с display:none; помогает $(нечто).show().init().hide() - замените красное на то что вам нужно.
Ответить с цитированием
  #10 (permalink)  
Старый 13.09.2016, 11:18
Новичок на форуме
Отправить личное сообщение для Alex25 Посмотреть профиль Найти все сообщения от Alex25
 
Регистрация: 09.09.2016
Сообщений: 8

Сообщение от рони Посмотреть сообщение
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'ом.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55