Select2 使用 jquery 隐藏选项

Posted 2023-05-07

【中文标题】Select2 使用 jquery 隐藏选项

【英文标题】：Select2 hide options with jquery

【发布时间】：2020-03-09 12:11:45

【问题描述】：

我需要在一个选择下拉菜单上显示/隐藏选项，这取决于另一个选择下拉选项。

我的代码：

$(document).ready(function() 
   $("#layout_select").select2();
   $("#column_select").select2();

   $("#layout_select").children('option:gt(0)').hide();
   $("#column_select").change(function() 
      $("#layout_select").children('option').hide();
      $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
   )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />


<select name="column_select" id="column_select">
   <option value="col1">1 column</option>
   <option value="col2">2 column</option>
   <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
  <option value="col1">none</option>

  <option value="col2_ms">layout 1</option> 
  <option value="col2_sm">layout 2</option>

  <option value="col3_mss">layout 3</option>
  <option value="col3_ssm">layout 4</option>
  <option value="col3_sms">layout 5</option>
 </select>

当我更改第一个“column_select”的选择时，我想使用隐藏/显示更改我的“layout_select”选项

类似this *** issue

注意：我使用的是 Select2。

在我的实现中，我完全按照示例进行操作，但是由于我使用的是 select2 脚本，所以它不起作用。

知道我在使用 select2 的情况下，有人知道如何做同样的事情吗？不使用 .remove() 和 .append()，但与给出隐藏/显示的示例完全相同。

【问题讨论】：

隐藏选项后是否再次尝试调用$("#layout_select").select2();？

不，不幸的是，即使$("#layout_select").children('option').hide(); 也没有任何效果。怎么再打电话？

也许您可以检查this answer 并添加禁用属性而不是隐藏您的选项。

【参考方案1】：

按照this answer 中的建议，您可以禁用选项而不是隐藏它们，并根据需要使用 CSS 隐藏选项（否则它们将显示为灰色）。

您必须在change 事件结束时调用$("#layout_select").select2(); 并调用$("#column_select").change(); 以在页面加载时触发更改事件。

$(document).ready(function() 
   $("#layout_select").select2();
   $("#column_select").select2();

   $("#layout_select").children('option:gt(0)').hide();
   $("#column_select").change(function() 
      $("#layout_select").children('option').prop('disabled', true);
      $("#layout_select").children("option[value^=" + $(this).val() + "]").prop('disabled', false);
      $("#layout_select").select2();
   )
   $("#column_select").change();
);

.select2-container--default .select2-results__option[aria-disabled=true] 
    display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />


<select name="column_select" id="column_select">
   <option value="col1">1 column</option>
   <option value="col2">2 column</option>
   <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
  <option value="col1">none</option>

  <option value="col2_ms">layout 1</option> 
  <option value="col2_sm">layout 2</option>

  <option value="col3_mss">layout 3</option>
  <option value="col3_ssm">layout 4</option>
  <option value="col3_sms">layout 5</option>
 </select>

【讨论】：

非常感谢，这解决了我的问题。拯救了我的一天。

@mik_assad 你可以accept这个答案然后;)