Select2 使用 jquery 隱藏選項

Question

我需要在一個 select 下拉菜單上顯示/隱藏選項，這取決於另一個 select 下拉選項。

我的代碼：

 $(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”選項

像這樣的 StackOverflow 問題

注意：我使用的是 Select2。

在我的實現中，我完全按照示例進行了操作，但是由於我使用的是 select2 腳本，所以它不起作用。

知道我正在使用select2 ，有誰知道如何做同樣的事情？ 沒有使用.remove() 和.append()，但與給出隱藏/顯示的示例完全相同。

Answer 1

正如此答案中所建議的那樣，您可以禁用選項而不是隱藏它們，並根據需要使用 CSS 隱藏選項（否則它們將變灰）。

您將不得不調用$("#layout_select").select2(); 在change事件結束時調用$("#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>