jQuery SimpleSelect
Добрый день, господа!
Есть вопрос по jQuery SimpleSelect, который возник из-за появления проблемы с обработкой select'ов на сайте. Имеется форма, в которой планируется использовать два и более выпадающих списков, дело в том что первый список успешно "цепляется" библиотекой, а вот например второй никак не реагирует на попытку открыть список. Скриншот прилагаю: http://pix.my/edit/1p7aEDcR Сильно прошу не бить, поскольку с JS даже не на ты :( |
Alex25,
id уникально!!! замените на class |
Цитата:
|
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>
|
Спасибо за помощь!
Проблему не решило, аналогичная проблема с ползунком http://pix.my/pZlqlIBX?1473667285 , почему то JS его не "цепляет". Суть в том что div в котором выводится данный ползунок или select из первого сообщения в теме, сделан в display:none; При выборе определенного пункта из списка в этом диве выводится контент с ползунком, который JS почему то не воспринимает. Убирал display:none; у дива, в котором выводится ползунок и все работало. Надеюсь все понятно написал. Как мне быть? |
Цитата:
|
Цитата:
|
Вот скриншот может так понятнее будет http://pix.my/edit/u7AG2llN
Селект, который отмечен как не рабочий, не работает только в диве result, в остальных случаях все ок. Как заставить его работать? Как сделать так чтобы jQuery SimpleSelect его увидел? ) |
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'ом. |
| Часовой пояс GMT +3, время: 20:36. |