Bootstrap-select不取id

Question

我的插件有问题，让我给你看html代码：

{% verbatim %}
  <ul class="hidden-xs">
    {{#each jobs_by_locations}}
      {{#if @last}}
        <li><a href="" class="job-location" data-location-id="{{this.name}}">{{../../link_to_others_title}}</a></li>
      {{else}}
        <li><a href="" class="job-location {{#if @first}}active{{/if}}" data-location-id="{{this.name}}">{{this.name}}</a></li>
      {{/if}}
      {{/each}}
  </ul>

  <select class="visible-xs">
    {{#each jobs_by_locations}}
      {{#if @last}}
        <option data-location-id="{{this.name}}" class="job-location">{{../../link_to_others_title}}</option>
      {{else}}
        <option data-location-id="{{this.name}}" class="job-location {{#if @first}}active{{/if}}">{{this.name}}</option>
      {{/if}}
      {{/each}}
  </select>
{% endverbatim %}

所以，我有一个用于桌面屏幕的 ul 和一个用于移动设备的 select。

在我的 js 文件上，我从那里遇到问题：

  $(document).on("click", ".job-location", function(event) {
    var $this = $(this);
    var locationId = $this.data("location-id");
    var pluginHtmlId = $this.closest(".jobs-list-plugins").attr("id");
    ....

问题是我的 locationId 未定义。

事实上，当 bootstrap-select 转换我的 select 时，没有任何 data-location-id。如果我使用 id 而不是数据属性，也会发生同样的事情。

下拉菜单在bootstrap-select之后包含这个：

<a tabindex="0" class="job-location" style="" data-tokens="null"><span class="text">London</span><span class="glyphicon glyphicon-ok check-mark"></span></a>

这里是 bootstrap-select 声明：

$('select').selectpicker({hideDisabled: true});

有人知道吗？

Answer 1

Ok，bootstrap-select只是读取了几个特定的数据属性进行转换。要实现你想要的，你可以使用 data-content.

把你option改成：

<select class="visible-xs">
    {{#each jobs_by_locations}}
      {{#if @last}}
        <option data-content="<span data-location-id='{{this.name}}'>{{../../link_to_others_title}}</span>" class="job-location">{{../../link_to_others_title}}</option>
      {{else}}
        <option data-content="<span data-location-id='{{this.name}}'>{{this.name}}</span>" class="job-location {{#if @first}}active{{/if}}">{{this.name}}</option>
      {{/if}}
    {{/each}}
</select>

要获得 data-location-id，您需要从跨度中获取它，例如：

$(document).on("click", ".job-location", function(event) {
    var $this = $(this);
    var locationId = $this.children( "span" ).first().attr("data-location-id");
    (...)

Bootstrap-select不取id

Bootstrap-select doesn't take id

javascript

jquery

twitter-bootstrap

bootstrap-select