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>

Answer 2

最后找到了解决方案。这是代码。不知道这是不是最好的选择，但它肯定有效。

jQuery("#myselect2dropdown option").each(function(i,e){
        jQuery("#myselect2dropdown").data('select2').dropdown.find("li:eq("+i+")").attr("data-type",jQuery(e).attr("data-type"));
      });

获取原始选项的课程以选择2下拉列表

2 个答案: