Hiding select2 dropdown menu

Question

I'm trying to get a handle on the full dropdown menu in a jQuery select2 container in order to hide it. One other SO post refers to this but I couldn't see how to make it work. My fiddle shows 3 containers. I want to hide the unchecked middle container. I've managed to make the border transparent, but unfortunately I'm still able to click on the empty space and get the dropdown, even though I thought I had the correct handle. How can I stop this happening? Thanks for any help. Fiddle: https://jsfiddle.net/bncgoLra/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<div id="Both_containers_TradeProdsListBoxID_tr">
  <div id="Lower_container_TradeProdsListBoxID_tr" 
class="Lower_container_TradeProdsListBoxClass_tr">


<label><input type="checkbox"  id="tr_ingot" value="ingot" />Ingot</label>

<select id="drop_ingot" multiple="multiple">
 <option value="Carbon">Carbon</option>
 <option value="Stainless">Stainless</option>
 <option value="Alloy">Alloy</option>
</select>


<label><input type="checkbox"  id="tr_rounds" value="rounds" />Rounds</label>

<select id="drop_rounds" multiple="multiple">
 <option value="Carbon">Carbon</option>
 <option value="Alloy">Alloy</option>
</select>


<label><input type="checkbox"  id="tr_ptwelded" value="ptwelded" />Welded</label>

<select id="drop_ptwelded" multiple="multiple">
 <option value="Carbon">Carbon</option>
 <option value="Stainless">Stainless</option>
 <option value="Alloy">Alloy</option>
</select>

</div>
</div>

.

$(function() {

$('select').select2();

$('#tr_ingot, #tr_ptwelded').prop("checked", true);
$('#tr_rounds').prop('disabled', true);

var dropID = '#drop_rounds';
$(dropID + ' + .select2-container .select2-selection--multiple').css('border-color','transparent');


// Can't seem to hide the middle drop-down
$(dropID + ' + .select2-container--open .select2-dropdown--below').css('display','none');
$(dropID + ' + .select2-container--open .select2-dropdown--below').css('display','hide');

});

Answer 1

您可以像这样简单：

样式：

#id_of_your_own_select_generated_by_select2 {
    .select2-results__option {
        display: none !important;
    }

    .select2-results__message {
        display: block !important;
    }
}

脚本：

let select_element = $('.class_of_your_own_select');

select_element.select2({
        maximumSelectionLength: select_element.data('max-count'),
        tags: true
});

Answer 2

尝试此操作，如果需要重新启用控件，请使用addClass再次添加类

$(function() {

$('select').select2('');

$('#tr_ingot, #tr_ptwelded').prop("checked", true);
$('#tr_rounds').prop('disabled', true);

var dropID = '#drop_rounds';

$(dropID).select2('destroy');
$(dropID).hide();

});

和html：

<div id="Both_containers_TradeProdsListBoxID_tr">
  <div id="Lower_container_TradeProdsListBoxID_tr" class="Lower_container_TradeProdsListBoxClass_tr">

<div>


    <label><input type="checkbox"  id="tr_ingot" value="ingot" />Ingot</label>

    <select id="drop_ingot" multiple="multiple">
   <option value="Carbon">Carbon</option>
   <option value="Stainless">Stainless</option>
   <option value="Alloy">Alloy</option>
   </select>
</div>   
<div>


    <label><input type="checkbox"  id="tr_rounds" value="rounds" />Rounds</label>

    <select id="drop_rounds" multiple="multiple">
   <option value="Carbon">Carbon</option>
   <option value="Alloy">Alloy</option>
   </select>
</div>
<div>


    <label><input type="checkbox"  id="tr_ptwelded" value="ptwelded" />Welded</label>

    <select id="drop_ptwelded" multiple="multiple">
   <option value="Carbon">Carbon</option>
   <option value="Stainless">Stainless</option>
   <option value="Alloy">Alloy</option>
   </select>
</div>
  </div>
</div>