Question

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

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

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

这是我的ASP.NET MVC代码，用于生成select：

<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属性的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选择变换还将跨度放在按钮中，以便在不显示下拉菜单时触发事件。

Bootstrap-select数据属性

1 个答案: