Аккордеон внутри бутстрапа выбирает

Я пытаюсь реализовать аккордеон внутри поля выбора. ЧТОБЫ показать поле выбора, я использую silvio more для выбора начальной загрузки. Раскрывающийся список представляет собой раскрывающийся список с множественным выбором и группами опций. Это работало довольно хорошо, но поскольку в раскрывающемся списке много элементов, появилось новое требование отображать значения в сворачиваемом формате.

Я думаю, что аккордеон должен мне подойти, но я не могу понять, как реализовать его с помощью выбора начальной загрузки.

Это код, который я использую для своего окна выбора

<select id="influencerNameCombo" title='Choose Influencer' data-live-search="true" data-actions-box="true" name="valueCombo[]" class="select_dropdown_style show-menu-arrow" data-width="100%" multiple data-selected-text-format="count>3" >

                        <optgroup class="cateGory1" label="cateGory1">
                            <option value="85" selected="selected" class="">Wohnidee MagazinÂ&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;</option>
                            <option value="x" selected="selected" class="">Some Value1</option>
                            <option value="y" selected="selected" class="">Some Value2</option>
                            <option value="z" selected="selected" class="">Some Value3</option>
                            <option value="a" selected="selected" class="">Some Value4</option>
                            <option value="b" selected="selected" class="">Some Value5</option>
                            <option value="c" selected="selected" class="">Some Value6</option>
                        </optgroup>

                        <optgroup class="cateGory2" label="cateGory2">

                                <option value="qw" selected="selected" class="">Some Value7</option>

                        </optgroup>

                        <optgroup class="cateGory3" label="cateGory3">

                                <option value="qw2" selected="selected" class="">Some Value10</option>

                        </optgroup>

                </select>

После заполнения раскрывающегося списка я звоню

$('select').selectpicker();

Любое предложение/решение/путь вперед высоко ценится.


accordion bootstrap-select
person Vatsal    schedule 14.09.2015    source источник
comment
Пожалуйста, добавьте свой код   -  person lifeisfoo    schedule 14.09.2015
comment
@lifeisfoo — добавлен код. Пожалуйста, предложите   -  person Vatsal    schedule 14.09.2015

Ответы (1)


arrow_upward
2
arrow_downward

Проведя некоторое время с bootstrap-select Сильвио Морето, я смог решить эту проблему. Я внес некоторые улучшения в js, и он работает нормально.

Ниже приведена ссылка https://jsfiddle.net/zqvvuts6/5/.

<select id="filter_sport" multiple="multiple"  name="filter_sport" 
                class="selectpicker" title='Choose a Sport'  data-actions-box="true" class="show-menu-arrow" 
                data-selected-text-format="count>3" 
                data-single-item-selected = "Sport Selected"
                data-all-items-selected="All Sports" 
                ata-multi-item-selected = "Sports Selected">


                    <option value="11" selected="selected">Cricket</option>
                    <option value="15" selected="selected">Football</option>
                    <option value="3" selected="selected">Hockey</option>
                    <option value="16" selected="selected">MMA</option>
                    <option value="6" selected="selected">Others</option>
</select>


<select class="show-menu-arrow" multiple data-actions-box="true" data-selected-text-format="count>2" >
 <optgroup label="Swedish Cars" data-collapsible-optgroup= "true" data-load-       collapse-optgroup ="true">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
 </optgroup>
 <optgroup label="German Cars" data-collapsible-optgroup= "true" data-load-collapse-optgroup ="false">
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>

В приведенном выше фрагменте показано, как нужно изменить html, чтобы настроить его, и мы видим, что есть два атрибута.

data-collapsible-optgroup= "true" data-load-collapse-optgroup ="false"

Здесь data-collapsible-optgroup определяет, свернута ли эта конкретная группа optgroup или нет. Если он включен, то второй параметр определяет, сворачивается ли он во время загрузки страницы или нет.

Он также имеет несколько дополнительных небольших функций, которые могут пригодиться, если кто-то захочет их использовать, например, отображение пользовательского текста, а не скучного текста «выбранные элементы». Таким образом, если вы выбрали 5 игрушек, вы сможете увидеть 5 игрушек, а не 5 предметов.

Пожалуйста, проверьте и дайте мне знать об исправлении и о том, можно ли его улучшить.

Счастливого обучения :)

person Vatsal    schedule 16.11.2015
comment
Спасибо за ваши усилия. Не могли бы вы посоветовать, можно ли изменить форму прямоугольника, чтобы он смотрел влево, а не вниз, когда группа свернута. Также можно ли нарисовать флажок рядом с именем группы и сделать его отмеченным, когда все элементы выбраны и сняты флажки в другом случае? Благодарю вас - person Jack; 20.07.2017
comment
Эй, Джек.. определенно выполнимо, но вам, возможно, придется немного разобраться в этом.. Я немного застрял в эти дни. - person Vatsal; 27.07.2017