选择后动态隐藏optgroup

Question

我的选择列表中有2个optgroup （类别和子类别）并且我试图显示optgroup并在选择子类别时隐藏其他。

例如，如果我选择类别（运动，音乐）在子类别我仅显示运动和音乐

中

我尝试了以下代码，但不起作用

谢谢

$("#custom_form_names_category").on("change", function() {
  var selectedVal = $(this).find("option:selected").text();
  console.log(selectedVal);
  $('#custom_form_names_subcategorie > [aria-label="' + selectedVal + '"]')
    .show()
    .siblings("optgroup")
    .css("display", "none");
});

$(".js-select2").select2({
  closeOnSelect: false,
  allowClear: true,
  tags: true,
  dropdownCssClass: "beforecheckbox"

});

.select2.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection__rendered {
  padding: 5px 15px 0 15px;
  text-transform: uppercase;
  font-size: 13px;
  box-shadow: none;
  background-image: none;
  text-transform: uppercase;
  font-size: 13px;
}

.select2-container .select2-selection--single {
  height: 100% !important;
  border-radius: 15px !important;
}

.beforecheckbox .select2-results__option[aria-selected=true]:before {
  content: "";
  color: #fff;
  background: url(../images/svg/check_active.png);
  border: 0;
  display: inline-block;
  padding-left: 3px;
}

.beforecheckbox .select2-results__option[aria-selected=true]:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fff;
  margin-right: 20px;
  vertical-align: middle;
  right: 0;
  float: right;
}

.beforecheckbox .select2-results__option[aria-selected=false]:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: #b7b9cc solid 2px;
  background-color: #fff;
  margin-right: 20px;
  vertical-align: middle;
  right: 0;
  float: right;
}

.beforecheckbox .select2-results__option[aria-selected=true]:before {
  background: red;
}

#custom_form_names_category {
  margin-bottom: 50px !important;
}

.select2.select2-container {
  margin-bottom: 50px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select id="custom_form_names_category" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
  <option value="1" data-select2-id="25">Sport</option>
  <option value="17" data-select2-id="26">Volley</option>
  <option value="18" data-select2-id="27">Musci</option>
  <option value="29" data-select2-id="28">film</option>
  <option value="35" data-select2-id="29">Englich</option>
</select>

<select id="custom_form_names_subcategorie" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible">
  <optgroup label="Sport" data-select2-id="33">
    <option value="2" data-select2-id="34">Dance </option>
  </optgroup>
  <optgroup label="Musci" data-select2-id="35">
    <option value="3" data-select2-id="36">Catégorie 4</option>
    <option value="4" data-select2-id="37">Rap</option>
  </optgroup>
  <optgroup label="Volley" data-select2-id="38">
    <option value="5" data-select2-id="39">Catégorie 4</option>
  </optgroup>
  <optgroup label="film" data-select2-id="40">
    <option value="7" data-select2-id="41">Catégorie 5</option>
  </optgroup>
</select>

Answer 1

您不能与选项组进行交互，但要与select2的渲染结果进行交互：

测试：

$ ('#select2-custom_form_names_subcategorie-results > [aria-label="' + selectedVal + '"]').show().siblings("li").css('display', 'none');