jquery - 获取原始选项的类以选择 2 下拉列表

Question

我有以下用于 select2 下拉列表的代码。我的目标是从

<option level="2" data-type="ci_type" value="44">Sales Service</option> ,

在 select2 下拉列表中，现在看起来像这样

<li class="select2-results-dept-0 select2-result select2-result-selectable"><div class="select2-result-label"><span class="select2-match"></span> Sales Service</div></li>

这可能吗？ 在我的研究过程中，我发现了 formatResultCssClass选项 ，但不确定如何使用它。

$(document).ready(function() {

  $("#my_select2_dropdown").select2({

  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />

<label>Value:</label>
<select id="my_select2_dropdown"  style="">
  <option style="padding-left:0em" level="0" data-type="type" value="1">value1</option>
  <option style="padding-left:1em" level="1" data-type="type" value="2">value2</option>
  <option style="padding-left:2em" level="2" data-type="type" value="4">value3</option>
  <option style="padding-left:2em" level="2" data-type="type" value="5">value4</option>
  <option style="padding-left:1em" level="1" data-type="type" value="7">value5
</select>

Answer 1

我不知道在 select2 版本 4 之前是否可行，但使用 templateResult 的 select2 v4 绝对可行.如果您使用的是 v4，这里是实现该目标的方法..

$("#cmdb_ci_type_parent_id").select2({
    templateResult: function(data, container) {
      if (data.element) {
        $(container).attr('lebel', $(data.element).attr("level"));
        $(container).attr('data-type', $(data.element).attr("data-type"));
      }
      return data.text;
    }
});

这就是你得到的 <li>

<li id="select2-cmdb_ci_type_parent_id-result-x7kd-1" class="select2-results__option" role="treeitem" aria-selected="false" lebel="0" data-type="ci_type">Services</li>

$(document).ready(function() {

  $("#cmdb_ci_type_parent_id").select2({
    templateResult: function(data, container) {
      if (data.element) {
        $(container).attr('lebel', $(data.element).attr("level"));
        $(container).attr('data-type', $(data.element).attr("data-type"));
      }
      return data.text;
    }
  });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<label>Value:</label>
<select id="cmdb_ci_type_parent_id" name="cmdb_ci_type[parent_id]" style="">
  <option style="padding-left:0em" level="0" data-type="ci_type" value="1">Services</option>
  <option style="padding-left:1em" level="1" data-type="ci_type" value="26">Business Service</option>
  <option style="padding-left:2em" level="2" data-type="ci_type" value="44">Sales Service</option>
  <option style="padding-left:2em" level="2" data-type="ci_type" value="45">Support Service</option>
  <option style="padding-left:1em" level="1" data-type="ci_type" value="27">IT Service</option>

</select>