Bootstrap-select数据属性

Question

我正在使用Bootstrap-select http://silviomoreto.github.io/bootstrap-select/来获取其中一些增强选项.

当我开发select的功能时,我正在使用直接的html选择响应jQuery事件,以在选择选项时进行Ajax调用.我在每个选项上使用数据属性来定义传递给Ajax调用的参数.

不幸的是,在应用Bootstrap-select组件时,它会将底层选择转换为带有隐藏ul的按钮.我的数据属性无法在转换中存活.是否有任何方法可以将自定义数据应用于可以在转换中存活的选项？

这是我的ASP.NET MVC代码生成选择:

<select class="selectpicker show-tick btn-kpi btn-kpi-select" data-style="btn-kpi-selector">
@foreach (SelectChartColumnVM col in chartCols)
{ 
    <option class="select-chart-column" 
            data-action="@col.Action" 
            data-new-id="@col.ID" 
            data-chart-index="@Model.ChartIndex" >
            @col.DisplayDescription()
    </option>
}
</select>

我的jQuery代码响应点击是这样的:

$('#charts').on('click', '.select-chart-column',
    function () {
        $this = $(this);
        $.shared.mvcAjax("/SelectChartColumn",
        {
            action: $this.data("action"),
            newId: $this.data("new-id"),
            chartIndex: $this.data("chart-index")
        },
        updateChartData);
    }
);

生成的html的示例如下:

<div class="btn-group bootstrap-select show-tick btn-kpi btn-kpi-select open">
    <button type="button" class="btn dropdown-toggle btn-kpi-selector" data-toggle="dropdown">
        <div class="filter-option pull-left">
            Rate            </div>&nbsp;<div class="caret"></div>
     </button>
     <ul class="dropdown-menu" role="menu" style="max-height: 699px; overflow-y: auto; min-height: 99px;">
         <li rel="0">
         <a tabindex="0" class="select-chart-column">
         <span class="text">
         Rate
         </span><i class="icon-ok check-mark"></i>
         </a>
         </li>
         <li rel="1">
         <a tabindex="0" class="select-chart-column">
         <span class="text">
         Hours
         </span><i class="icon-ok check-mark"></i>
         </a></li>
    </ul>
</div>

正如您所看到的,列表项在被Bootstrap-select代码转换后没有数据属性.

Answer 1

我已经通过使用data-content属性解决了这个问题.

<select class="selectpicker show-tick btn-kpi btn-kpi-select chart" data-style="btn-kpi-selector">
@foreach (SelectChartColumnVM col in chartCols)
{ 
    <option data-content="<span class='select-chart-column' data-action='@col.Action' 
        data-new-id='@col.ID' data-chart-index='@Model.ChartIndex'>    
        @col.DisplayDescription() </span>">
        @col.DisplayDescription()
    </option>
}
</select>

分配给data-content属性的跨度将插入到生成的列表html中.

$('#charts').on('click', 'a > .select-chart-column',
    function () {
        $this = $(this);
        $.shared.mvcAjax("/SelectChartColumn",
        {
            action: $this.data("action"),
            newId: $this.data("new-id"),
            chartIndex: $this.data("chart-index")
        },
        updateChartData);
    }
);

我必须小心并将jQuery选择器更改为仅获取作为锚标记的直接子元素的元素.Bootstrap选择变换还将跨度放在按钮中,以便在不执行此操作时仅在显示下拉菜单时触发事件.