Question

我正在尝试在选择框中实现手风琴。要显示选择框，我正在使用silvio moreto bootstrap select。下拉列表是带有optgroups的多选下拉列表。它工作得很好，但由于下拉列表中有很多元素，因此需要以可折叠格式显示值。

我认为手风琴应该适合我，但我无法找到如何使用bootstrap select来实现它。

这是我用于选择框的代码

<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();

非常感谢任何建议/解决方案/前进道路。

Answer 1

在花了一些时间与silvio moreto的bootstrap-select之后，我能够解决这个问题。我已经对js做了一些改进，它工作正常。

以下是链接 https://jsfiddle.net/zqvvuts6/5/

var lstinsertproductvalue=new List<<*CLASSTYPE*>>();
for (int i = 0; i < product.ListProductFields.Count; i++)
            {
insertproductvalue=new <<*CLASSTYPE*>>();
                insertproductvalue.Product_ID = product.Product_ID;
                insertproductvalue.Field_ID = product.ListProductFields[i].ProductFieldID;
                insertproductvalue.Field_Value_EN = product.ListProductFields[i].Field_Value_EN;
lstinsertproductvalue.Add(insertproductvalue); 
// Here you have created a list your-self assuming that product.ListProductFields is not a list. 
            };

lstinsertproductvalue.Foreach(objEach=>{
db.AB_Product_vs_Field.Add((objEach); /* First we can get, .productId, .FeildId etc inside the function*/
// OR 
// db.AB_Product_vs_Field.Add((objEach.Product_ID, objEach.ProductFieldID, objEach.Field_Value_EN;);    
});
db.SaveChanges();

上面的代码片段包含如何更改html以配置它，我们可以看到有两个属性

<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>

此处data-collapsible-optgroup确定该特定optgroup是否已折叠。如果已启用，则第二个选项确定它是否在页面加载时折叠。

它还有一些额外的小功能，如果有人想要使用它们，比如显示自定义文本而不是无聊的“选中项目”文本，它们可能会派上用场。因此，如果您选择了5个玩具，您将能够看到5个玩具而不是5个玩具。

请检查并告诉我有关修复的信息，以及是否可以进一步改进。

快乐学习：）

手风琴选择内的手风琴

1 个答案: