Заполнение текста button в зависимости от количества выбранных select

225

20 марта 2018, 03:05

Есть кнопки magic-select у которого кнопка

<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="selected active">Автозаводский</li>
    <li rel="3" class=" active">Канавинский</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">&nbsp;</span>
</div>

Как сделать чтобы в текст 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">&nbsp;</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>

Answer 1

let select = document.querySelectorAll('.ja-magic-select>ul>li.active');
select.forEach(a=>{
    a.addEventListener('click', ()=>{
        this.classList.toggle('selected');
        document.querySelector('.btn-close').textContent = 'Район ' + select.querySelectorAll('.selected').length;
    })
})