select2：使用第二个 select 菜单减少选项数量

Question

我们有一个服装产品上传表格，服装项目的尺码可以采用多种不同的国际格式：英国、法国、美国、国际等。

这意味着 select2 尺寸菜单非常冗长。我们希望在这个 Size one 之前有另一个 select 菜单，其中包含格式（选择英国、法国、美国等之一），并将 select2 菜单中的选项过滤为仅那些来自所选国籍的人。

因此，如果用户 selects 'France' 在第一个 select，那么 FR-32、FR-34、FR-36 等在 [=37] 中可用=]2。如果他们选择 'UK'，则剩下 UK-8、UK-10、UK-12 等等。

我找到了这个 SO: Hiding Select2 options 但我无法理解 jquery 来识别 select2 中的选项标签以将隐藏属性添加到（如果那是正确的方法）。

感谢收到任何帮助！

编辑（添加了我试过的相关位）：

先select，选择国籍：

<select class="size-nationality">
    <option selected value="">Please choose:</option>
    <option value="UK">UK</option>
    <option value="FR">French</option>
    <option value="IT">Italian</option>
    <option value="US">US</option>
    <option value="Int">International</option>
</select>

主要 select2 选项：

<select class="select2 select_prod_size select2-hidden-accessible"
id="wcv_custom_taxonomy_product_size[]" 
name="wcv_custom_taxonomy_product_size[]" 
aria-hidden="true">
    <option value="">Select Size</option>   
    <option class="level-0" value="258">UK 06</option>
    <option class="level-0" value="252">UK 08</option>
    <option class="level-0" value="253">UK 10</option>
    <option class="level-0" value="254">UK 12</option>
    <option class="level-0" value="255">UK 14</option>
    <option class="level-0" value="256">UK 16</option>
    <option class="level-0" value="257">UK 18</option>
    <option class="level-0" value="264">FR 32</option>
    <option class="level-0" value="265">FR 34</option>
    <option class="level-0" value="266">FR 36</option>
    <option class="level-0" value="267">FR 38</option>
    <option class="level-0" value="267">FR 40</option>
</select>

jquery将不需要的选项注释掉（全部注释即可）：

$(function() {
    $('.size-nationality').on('change', function() {
      var val = this.value;
      // var val = this.html;
        element = $("select.select_prod_size option:not(:contains('("+val+")'))");
        comment = document.createComment(element.get(0).outerHTML);
        element.replaceWith(comment);
    });
  });

Answer 1

您可以使用 select2 插件的匹配器方法。因此，每当用户 select 来自第一个 select-box 的任何值时，您都可以使用 data.text.indexOf(val) != -1 过滤第二个 select-box 中的选项。

演示代码 :

$(function() {
  $("select").select2({
    "width": "150px"
  });
  $('.size-nationality').on('change', function() {
    var val = this.value;
    $("select[id='wcv_custom_taxonomy_product_size[]']").val("").trigger("select2"); //remove any selected value
    $("select[id='wcv_custom_taxonomy_product_size[]']").select2({
      matcher: function(term, data, option) {
        //here data is json obj then,,use .text to get option text 
        if (data.text.indexOf(val) != -1) {
          return data; //return...data if found..
        } else {
          return null; //return null..if not found
        }

      }
    })

  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://woocommerce.github.io/selectWoo/accessibility-testing/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://woocommerce.github.io/selectWoo/accessibility-testing/selectWoo.full.js"></script>


<select class="size-nationality">
  <option selected value="">Please choose:</option>
  <option value="UK">UK</option>
  <option value="FR">French</option>
  <option value="IT">Italian</option>
  <option value="US">US</option>
  <option value="Int">International</option>
</select>
<select class="select2 select_prod_size" id="wcv_custom_taxonomy_product_size[]" name="wcv_custom_taxonomy_product_size[]" aria-hidden="true">
  <option value="">Select Size</option>
  <option class="level-0" value="258">UK 06</option>
  <option class="level-0" value="252">UK 08</option>
  <option class="level-0" value="253">UK 10</option>
  <option class="level-0" value="254">UK 12</option>
  <option class="level-0" value="255">UK 14</option>
  <option class="level-0" value="256">UK 16</option>
  <option class="level-0" value="257">UK 18</option>
  <option class="level-0" value="264">FR 32</option>
  <option class="level-0" value="265">FR 34</option>
  <option class="level-0" value="266">FR 36</option>
  <option class="level-0" value="267">FR 38</option>
  <option class="level-0" value="267">FR 40</option>
</select>

select2：使用第二个 select 菜单减少选项数量

select2: reduce number of options with a second select menu

jquery

jquery-select2

wcvendors