title: Bootstrap-select data attributes
body: <p>I'm using Bootstrap-select <a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow">http://silviomoreto.github.io/bootstrap-select/</a> for some of it's enhanced options.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Here's my ASP.NET MVC code to generate the select:</p>
  
  <pre><code>&lt;select class="selectpicker show-tick btn-kpi btn-kpi-select" data-style="btn-kpi-selector"&gt;
  @foreach (SelectChartColumnVM col in chartCols)
  { 
      &lt;option class="select-chart-column" 
              data-action="@col.Action" 
              data-new-id="@col.ID" 
              data-chart-index="@Model.ChartIndex" &gt;
              @col.DisplayDescription()
      &lt;/option&gt;
  }
  &lt;/select&gt;
  </code></pre>
  
  <p>My jQuery code to respond to a click is like this:</p>
  
  <pre><code>$('#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);
      }
  );
  </code></pre>
  
  <p>An example of the generated html is as follows:</p>
  
  <pre><code>&lt;div class="btn-group bootstrap-select show-tick btn-kpi btn-kpi-select open"&gt;
      &lt;button type="button" class="btn dropdown-toggle btn-kpi-selector" data-toggle="dropdown"&gt;
          &lt;div class="filter-option pull-left"&gt;
              Rate            &lt;/div&gt;&amp;nbsp;&lt;div class="caret"&gt;&lt;/div&gt;
       &lt;/button&gt;
       &lt;ul class="dropdown-menu" role="menu" style="max-height: 699px; overflow-y: auto; min-height: 99px;"&gt;
           &lt;li rel="0"&gt;
           &lt;a tabindex="0" class="select-chart-column"&gt;
           &lt;span class="text"&gt;
           Rate
           &lt;/span&gt;&lt;i class="icon-ok check-mark"&gt;&lt;/i&gt;
           &lt;/a&gt;
           &lt;/li&gt;
           &lt;li rel="1"&gt;
           &lt;a tabindex="0" class="select-chart-column"&gt;
           &lt;span class="text"&gt;
           Hours
           &lt;/span&gt;&lt;i class="icon-ok check-mark"&gt;&lt;/i&gt;
           &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the list items have no data attributes after they've been transformed by the Bootstrap-select code.</p>