Twitter bootstrap 引导选择数据属性

我正在使用Bootstrap select的一些增强选项

在开发select的功能时，我使用了一个直接的html select来响应jQuery事件，以便在选择选项时进行Ajax调用。我在每个选项上使用数据属性来定义要传递到Ajax调用的参数

不幸的是，在应用引导选择组件时，它将底层选择转换为带有隐藏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>

生成的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>

比率


比率


小时

---

正如您所看到的，列表项在通过引导选择代码转换后没有数据属性。

我已经通过使用数据内容属性解决了这个问题

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

---

我必须小心，将jQuery选择器更改为只获取锚标记的直接子元素。Bootstrap select转换还将span放置在按钮中，这样，如果您不这样做，则仅在显示下拉菜单时就会触发事件。

显示生成的htmlplease@ariel添加了生成的html。您还可以使用Razor HtmlHelper

ExtendedDropDownList for

和中的小扩展方法。不要忘记修改属性白名单，否则额外的数据属性将被过滤掉。见：

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

$('#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);
    }
);