19.03.2018, 14:29
|
|
Интересующийся
|
|
Регистрация: 21.01.2011
Сообщений: 15
|
|
|
Как сделать чтобы в текст button менялось значение в зависимости от количества выбран
Как сделать чтобы в текст button менялось значение в зависимости от количества выбранных select например выбираем 2 селекта в button текст меняется на Район (2), выбираем 3 селекта в button текст меняется на Район (3), то есть шел подсчет количества выбранных селектов и передача в поле button.
Вот полный код, то есть по сути надо чтобы подсчитывалось количество li с классом active selected в div который следующий после lable с кнопкой button и передавалось это количество в button например район (3)
<li style=" clear:both;" class="magic-select">
<div class="subclass">
<label class="group-label">
<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район
</button>
</label>
<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
<ul>
<li rel="2" class="active">Автозаводский</li>
<li rel="3" class="active selected">Канавинский</li>
<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
<li rel="6" class=" active">Нижегородский</li>
<li rel="7" class=" active">Приокский</li>
<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
</ul>
<span class="btn-close" onclick="jaMagicSelectClose(this, 'mg-161-xf_1'); return false;">Close</span><span class="arrow"> </span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
<span rel="3" class="remove" title="Remove"></span></span></div>
<script type="text/javascript">
jQuery(document).ready( function(){
jaMagicInit('mg-161-xf_1', 'xf_1');
});
</script>
</div>
</li>
|
|
19.03.2018, 14:41
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
А что делает функция jaMagicInit(), не подсчитывает ли выбранных и подставляет их в текст?
|
|
19.03.2018, 14:58
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<li style=" clear:both;" class="magic-select">
<div class="subclass">
<label class="group-label">
<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район
</button>
</label>
<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
<ul>
<li rel="2" class="active">Автозаводский</li>
<li rel="3" class="active selected">Канавинский</li>
<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
<li rel="6" class=" active">Нижегородский</li>
<li rel="7" class=" active">Приокский</li>
<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
</ul>
<span class="btn-close">Close</span><span class="arrow"> </span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
<span rel="3" class="remove" title="Remove"></span></span></div>
</div>
</li>
<script>
document.querySelector(".ja-magic-select").addEventListener('click', leng);
function leng(){document.querySelector("#g-161-xf_1").textContent = 'Район ('+document.querySelectorAll(".ja-magic-select li.active").length+')';
}
leng();
</script>
</body>
</html>
|
|
19.03.2018, 16:00
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
М.б. как-то так?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.selected { color: red;};
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<li style=" clear:both;" class="magic-select">
<div class="subclass">
<label class="group-label">
<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район (0)
</button>
</label>
<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
<ul>
<li rel="2" class="active">Автозаводский</li>
<li rel="3" class="active selected">Канавинский</li>
<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
<li rel="6" class=" active">Нижегородский</li>
<li rel="7" class=" active">Приокский</li>
<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
</ul>
<span class="btn-close">Close</span><span class="arrow"> </span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
<span rel="3" class="remove" title="Remove"></span></span></div>
</div>
</li>
<script>
document.querySelector(".ja-magic-select").addEventListener('click', leng);
function leng(event){
event.target.classList.toggle("selected");
var but = document.querySelector("#g-161-xf_1");
but.textContent = but.textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length);
}
var stEl = document.querySelector(".ja-magic-select .selected");
stEl.click(); stEl.click();
</script>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 19.03.2018 в 16:59.
|
|
19.03.2018, 16:04
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Dilettante_Pro,
если функция объявленная в коде подсчитывают такое и помещают в кнопку при загрузке страницы, то .textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length;
И может как-то увязать тогда с существующей функцией.
|
|
19.03.2018, 16:31
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
laimas,
|
Сообщение от laimas
|
|
если функция объявленная в коде подсчитывают такое и помещают в кнопку при загрузке страницы, то .textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length;
|
Изменил
|
Сообщение от laimas
|
|
И может как-то увязать тогда с существующей функцией.
|
Какой? jaMagicSelect ? Она работает по клику на кнопку, и, по идее, делает что-то другое ( и неизвестно что)
Последний раз редактировалось Dilettante_Pro, 19.03.2018 в 17:18.
|
|
19.03.2018, 16:33
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
У него кругом передается g-161-xf_1, может где-то и есть нужное.
|
Сообщение от Dilettante_Pro
|
|
Какой? jaMagicSelect ?
|
jaMagicInit('mg-161-xf_1', 'xf_1');
Последний раз редактировалось laimas, 19.03.2018 в 16:39.
|
|
19.03.2018, 19:31
|
|
Интересующийся
|
|
Регистрация: 21.01.2011
Сообщений: 15
|
|
|
Не понимаю почему, но на сайте почему-то не работает.
|
|
19.03.2018, 19:33
|
|
Интересующийся
|
|
Регистрация: 21.01.2011
Сообщений: 15
|
|
Сообщение от Dilettante_Pro
|
М.б. как-то так?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.selected { color: red;};
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<li style=" clear:both;" class="magic-select">
<div class="subclass">
<label class="group-label">
<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район (0)
</button>
</label>
<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
<ul>
<li rel="2" class="active">Автозаводский</li>
<li rel="3" class="active selected">Канавинский</li>
<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
<li rel="6" class=" active">Нижегородский</li>
<li rel="7" class=" active">Приокский</li>
<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
</ul>
<span class="btn-close">Close</span><span class="arrow"> </span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
<span rel="3" class="remove" title="Remove"></span></span></div>
</div>
</li>
<script>
document.querySelector(".ja-magic-select").addEventListener('click', leng);
function leng(event){
event.target.classList.toggle("selected");
var but = document.querySelector("#g-161-xf_1");
but.textContent = but.textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length);
}
var stEl = document.querySelector(".ja-magic-select .selected");
stEl.click(); stEl.click();
</script>
</body>
</html>
|
Что может быть не так? не работает и ошибки не выдает.
|
|
19.03.2018, 19:57
|
|
Интересующийся
|
|
Регистрация: 21.01.2011
Сообщений: 15
|
|
|
Сообщение от j0hnik
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<li style=" clear:both;" class="magic-select">
<div class="subclass">
<label class="group-label">
<button type="button" id="g-161-xf_1" class="select exfield exgroup1 label_block switch-target opened" href="#" onclick="jaMagicSelect(this, 'mg-161-xf_1'); return false;" title="Район">Район
</button>
</label>
<div class="ja-magic-select" id="mg-161-xf_1" data-autofilter="0" style="display: block;">
<ul>
<li rel="2" class="active">Автозаводский</li>
<li rel="3" class="active selected">Канавинский</li>
<li rel="4" class="active">Ленинский</li><li rel="5" class="active">Московский</li>
<li rel="6" class=" active">Нижегородский</li>
<li rel="7" class=" active">Приокский</li>
<li rel="8" class=" active">Советский</li><li rel="9" class=" active">Сормовский</li>
</ul>
<span class="btn-close">Close</span><span class="arrow"> </span></div><div id="mg-161-xf_1-container" class="ja-magic-select-container">
<span id="mg-161-xf_1-3">Канавинский<input type="hidden" name="xf_1[]" value="3">
<span rel="3" class="remove" title="Remove"></span></span></div>
</div>
</li>
<script>
document.querySelector(".ja-magic-select").addEventListener('click', leng);
function leng(){document.querySelector("#g-161-xf_1").textContent = 'Район ('+document.querySelectorAll(".ja-magic-select li.active").length+')';
}
leng();
</script>
</body>
</html>
|
Работает, однако если меняю класс active на selected показывает в 2 раза больше, то есть если выбираю 1 элемент показывает что выбр
|
|
|
|
