Bootstrap-select data attributes

Question

I'm using Bootstrap-select http://silviomoreto.github.io/bootstrap-select/ for some of it's enhanced options.

When I was developing the functionality of the select, I was using a straight forward html select responding to a jQuery event to make an Ajax call when an option is selected. I was using data attributes on each option to define parameters to pass into the Ajax call.

Unfortunately on applying the Bootstrap-select component, it transforms the underlying select into a button with a hidden ul. My data attributes don't survive the transformation. Is there any way of applying custom data to an option that will survive the transformation?

Here's my ASP.NET MVC code to generate the 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>

My jQuery code to respond to a click is like this:

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

An example of the generated html is as follows:

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

As you can see the list items have no data attributes after they've been transformed by the Bootstrap-select code.

Answer 1

I've resolved this by using the data-content attribute.

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

The span assigned to the data-content attribute gets inserted into generated list 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);
    }
);

I had to be careful and change the jQuery selector to only get elements that were a direct child of an anchor tag. The Bootstrap select transform also places the span in the button so that the event will get triggered on just showing the drop down menu if you don't do this.