Как сделать чтобы в текст 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>
|
А что делает функция jaMagicInit(), не подсчитывает ли выбранных и подставляет их в текст?
|
<!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>
|
М.б. как-то так?
<!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,
если функция объявленная в коде подсчитывают такое и помещают в кнопку при загрузке страницы, то .textContent.replace(/\d+/, document.querySelectorAll(".ja-magic-select li.selected").length; И может как-то увязать тогда с существующей функцией. |
laimas,
Цитата:
Цитата:
|
У него кругом передается g-161-xf_1, может где-то и есть нужное.
Цитата:
|
Не понимаю почему, но на сайте почему-то не работает.
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:35. |