引导选择数据属性

Question

我将 Bootstrap-select http://silviomoreto.github.io/bootstrap-select/ 用于其中的一些增强选项。

当我开发 select 的功能时，我使用直接的 html select 响应 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>

如您所见，列表项在被引导选择代码转换后没有数据属性。

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 属性的 span 被插入到生成的列表 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 选择转换还将跨度放置在按钮中，这样如果您不这样做，只要显示下拉菜单就会触发事件。