javascript - Prop hidden() or hide() and show() can't used in Select2 Multiple Option - Stack Overflow

admin管理员组

文章数量:1292361

I want to ask about select2. I want, when I choose the option it will be hidden from the options in the select. And also if we remove it in multiple select option, it will be showed too in the option. The cases is when I'm using prop('disabled', true), It's works. But, when I'm using prop('hidden', true), It's not hidden properly.

$(document).on("select2:select", "#multiple_one, #multiple_two", function(e) {
  updateSelections(e.params.data.id);
});


$(document).on("select2:unselect", "#multiple_one, #multiple_two", function(e) {
  updateSelectionsTwo(e.params.data.id);
});

I'm using event select2:select and select2:unselect

  function updateSelections(selectedValue) {
    // console.log(selectedValue);
    $("#multiple_one option[value='" + selectedValue + "']").prop('disabled', true)
    $("#multiple_two option[value='" + selectedValue + "']").prop('disabled', true)
    // $("#multiple_one").select2("destroy").select2();
  }

The code is using disabled property. Could I use hidden property if it's already selected? And show again if the option is unselected?

I want to ask about select2. I want, when I choose the option it will be hidden from the options in the select. And also if we remove it in multiple select option, it will be showed too in the option. The cases is when I'm using prop('disabled', true), It's works. But, when I'm using prop('hidden', true), It's not hidden properly.

$(document).on("select2:select", "#multiple_one, #multiple_two", function(e) {
  updateSelections(e.params.data.id);
});


$(document).on("select2:unselect", "#multiple_one, #multiple_two", function(e) {
  updateSelectionsTwo(e.params.data.id);
});

I'm using event select2:select and select2:unselect

  function updateSelections(selectedValue) {
    // console.log(selectedValue);
    $("#multiple_one option[value='" + selectedValue + "']").prop('disabled', true)
    $("#multiple_two option[value='" + selectedValue + "']").prop('disabled', true)
    // $("#multiple_one").select2("destroy").select2();
  }

The code is using disabled property. Could I use hidden property if it's already selected? And show again if the option is unselected?

• javascript
• jquery
• jquery-ui
• select
• jquery-select2

Share Improve this question Follow edited Feb 13 at 9:05 mplungjan 178k2828 gold badges181181 silver badges240240 bronze badges asked Feb 13 at 8:44 Filbert UmbawaFilbert Umbawa 1133 bronze badges 1

• Please click edit and post a minimal reproducible example using the [<>] snippet editor and select2 framework from CDN – mplungjan Commented Feb 13 at 8:52

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

It's already done, the hidden property or etc isn't appear in select2 component. Only have disabled property. So, we combined the selector aria-disabled="true" in css.

<li class="select2-results__option" id="select2-multiple_one-result-nqh8-1" role="option" aria-disabled="true" data-select2-id="select2-multiple_one-result-nqh8-1">BIAYA BURUH</li>

With this css

.select2-results__option[aria-disabled="true"] {
    display: none;
}

Maybe it will help. Thanks.

I don't think html element has "hidden" attribute, maybe you need to use css "display: none".

本文标签： javascriptProp hidden() or hide() and show() can39t used in Select2 Multiple OptionStack Overflow