jquery-select2 - 如何根据选项类别动态过滤 select2 列表

Question

我有一个可选“机会”的下拉选择(在下面的示例中为 id="opportunities" )，我使用 select2 jquery plugin 对其进行了增强，并且希望动态过滤此列表，以减少使用第二个选择下拉列表向用户呈现的可能选项(在下面的示例中为 id="group-select")，

<label>
  Select an opportunity<br>
  <select id="opportunities" style="width:300px;" multiple="multiple" name="selected-opps" value="">
    <optgroup label="Class A">
      <option class="group-1" value="1a">Opportunity 1a</option>
      <option class="group-2" value="2a">Opportunity 2a</option>
    </optgroup>
    <optgroup label="Class B">
      <option class="group-1" value="1b">Opportunity 1b</option>
      <option class="group-2" value="2b">Opportunity 2b</option>
    </optgroup>
    <optgroup label="Class C">
      <option class="group-1" value="1c">Opportunity 1c</option>
      <option class="group-2" value="2c">Opportunity 2c</option>
    </optgroup>
  </select>
</label>
<select id="group-select">
  <option value="">Select a group</option>
  <option value="group-1">group 1</option>
  <option value="group-2">group 2</option>
</select>
</div>
<div id="select-opportunity"></div>
<script type="text/javascript">
(function( $ ) {
  'use strict';

   var opportunities = $('select#opportunities').select2({
    dropdownParent: $('#select-opportunity')
  });
})( jQuery );
</script>

我希望能够在第二个选择中进行选择，例如“组 1”，并且希望 select2 列表仅包含“组 1”项目，按照第一个选择下拉列表中具有 grouo-1 的选项类属性。

Answer 1

我设法使用 select2 插件提供的 2 个可选功能来解决这个问题，即使用 templating functionality 控制项目构建和显示方式的能力。 ，并使用programmatic control暴露在插件中。我将问题中示例下方附加的 javascript 替换为，

<script type="text/javascript">
(function( $ ) {
  'use strict';

  var opportunities = $('select#opportunities').select2({
    dropdownParent: $('#select-opportunity'),
    templateResult: formatItem
  });
  function formatItem (state) {
    if (!state.id) { return state.text; }
    //change the id of our select2 items
    state._resultId = state._resultId+'-'+state.element.className;
    var $state = $(
      '<span class="opportunity-item ' + state.element.className + '">' + state.text + '</span>'
    );
    return $state;
  }
  $('select#group-select').change( function() {
    //hide the unwanted options
    var group = $('select#group-select option:selected').val();
    //clear the styling element
    $('style#select2-style').empty();

    if(group){
      //if a group is selected we need to hide all the others
      $('select#group-select option').not(':selected').each(function(){
        group = $(this).val();
        if(group){
          $('style#select2-style').append(
           'li[id$="'+group+'"]{display:none;}'
          );
        }
      });
    }
    //force the select2 to referesh by opening and closing it again
    opportunities.select2('open');
    opportunities.select2('close');
  });


})( jQuery );
</script>
<style id="select2-style"></style>

我还添加了一个空的 <style>底部的元素，我在其中动态创建隐藏不需要的项目所需的规则。

逻辑

上面的代码创建了模板函数formatItem select2 插件将使用它来格式化项目。该项目state对象被传递给包含唯一的 id 的函数对于每个项目。

这个id通过附加相应选项元素的类来修改。

在第二个下拉列表中选择组选项 ( #group-select ) 时，将创建一组样式并将其附加到底部 <style>元素隐藏其 id 的所有元素属性以要隐藏的类名结尾，例如如果选择了 group-1，代码将创建一个样式来隐藏 group-2 项目，

li[id$="group-2"] { 
  display:none;
}

但是，要实现此目的，我们需要强制 select2 下拉列表刷新以获取新样式，而我发现这项工作的唯一方法是使用插件的编程控制来“打开”并立即“关闭” select2 下拉列表。