javascript - 选择后动态隐藏选项组

Question

我的选择列表中有 2 个选项组(类别和子类别) 我正在尝试显示 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 的渲染结果。

测试:

$('#custom_form_names_subcategorie').on('select2:open', function (e) {
//var first = $('#custom_form_names_category').find(':selected');
//console.log(first);
setTimeout(function(){
    $('[aria-label]').hide();
    $('#custom_form_names_category').find(':selected').each(function( index ) {
        var selected = $( this ).text();
        console.log( index + ": " + selected );
        $('[aria-label="' + selected + '"]').show();
        console.log($('[aria-label="' + selected + '"]'));

    });
},100);
//$('[aria-label="' + selectedVal + '"]').show().siblings("li").css('display', 'none');

});

当您选择多个时，这也适用。我必须设置一个 setTimeout ，因为在您使用的 select2 版本的 on open 事件中，实际上尚未绘制选择。尝试更改版本。然而这确实有效。

或者，您应该按照此链接中的定义动态填充第二个选择: Add, select, or clear items