javascript - Select2 使用 jquery 隐藏选项

Question

我需要在一个选择下拉列表上显示/隐藏依赖于另一个选择下拉选项的选项。

我的代码:

$(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 StackOverflow issue

注意:我使用的是 Select2。

在我的实现中，我完全按照示例进行操作，但由于我使用 select2 scrpit 不起作用。

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

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>