如何基于选项类动态过滤select2列表 [英] How to dynamically filter a select2 listing based on option class

问题描述

我有一个可选的机会"(在下面的示例中为id="opportunities")下拉列表，可以使用 select2 jquery插件，并希望动态过滤此列表，以减少使用第二个选择下拉菜单(在下面的示例中为id="group-select")呈现给用户的可能选项，

I have a dropdown select of optional 'opportunities' (id="opportunities" in the example below) which I enhance using the select2 jquery plugin, and wish to dynamically filter this list in order to reduce the possible options presented to a user using a 2nd select dropdown (id="group-select" in the example below),

<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列表根据第一个选择下拉菜单中的选项仅包含"group-1"项，且其中grouo-1类属性.

I wish to be able to make a selection in the 2nd select, say 'group 1' and would like the select2 list to contain only 'group-1' items as per the option in the first select dropdown that have the grouo-1 class attribute.

推荐答案

我设法使用select2插件提供的2个可选功能来解决此问题，即使用模板功能，并使用程序控制.我将问题中示例下方的javascript替换为

I managed to solve this using 2 optional functionality provided by the select2 plugin, namely the ability to control the way items are built and displayed using the templating functionality, and using the programmatic control exposed in the plugin. I replaced the javascript appended below the example in the question with,

<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>元素，在其中我动态创建了隐藏不需要的项目所需的规则.

I have also added an empty <style> element at the bottom in which I dynamically create the rules required to hide the unwanted items.

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

The code above creates templating function formatItem that the select2 plugin will use to format the items. The item state object is passed to the function which includes the unique id for each item.

此id通过添加相应的option元素的类进行修改.

This id is modified by appending the class of the corresponding option element.

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

When a group option is selected in the 2nd dropdown select (#group-select) a set of styling is created and appended to the bottom <style> element to hide all the elements whose id attributes end with the class names to be hidden, for example if one seleced group-1, the code will create a style to hide group-2 items,

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

但是，要使此方法起作用，我们需要强制select2下拉列表刷新以采用新样式，而我发现此方法的唯一方法是使用插件的编程控件来打开"并立即关闭" select2下拉列表.

However for this to work we need to force the select2 dropdown to refresh to pick up the new styling and the only way I found for this work was to use the programmatic control of the plugin to 'open' and immediately 'close' the select2 dropdown.

这篇关于如何基于选项类动态过滤select2列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！