如何在模式窗口出现之前隐藏select2下拉菜单

Question

当我单击select2下拉菜单并单击“新客户”时，下拉菜单仍显示在模态窗口上方，因此如何在出现模态窗口之前关闭下拉菜单。 我在Google上尝试了一些代码，并在不同的Q / A论坛上看到了许多问题，但是没有任何反应，有人可以帮助我该怎么做。 我花了很多时间。

谢谢！

在点击“新客户”按钮之前。

模态窗口下拉菜单

<script>
$(document).ready(function() {

   $('.customer').select2({ placeholder : 'Select Customer'}).on('select2:open', function(){
   $(".select2-results:not(:has(a))").append('<a href="javascript:void();" class="dropdown-add-option" data-toggle="modal" data-dismiss=".customer" data-backdrop="static" data-target="#default"><i class="fal fa-plus"></i> New Customer</a>').on('click', '.dropdown-add-option', function() {
   $(this).trigger('select2:close');
    });
});
});
</script>

<select class="customer form-control input-sm" name="customer_name">
  @foreach ($customers as $customer)
  <option value="{{$customer->id}}">{{$customer->salutation.' '.$customer->first_name.' '.$customer->last_name}}</option>
  @endforeach
</select>

<div class="modal fade text-xs-left" id="default" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" style="margin:0 auto;">
      <div class="modal-header" style="background:#fbfbfd;border-radius:3px;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title" id="myModalLabel1">New Contact</h5>
      </div>
        <form method="POST" action="{{url('/contacts')}}"  id="newContact">
            @csrf
        <div class="modal-body">
            <div id="errors"></div>
            <div class="row">
                <div class="col-md-6">
                <h6 class="form-section" style="font-size:11px;">Contact Info</h6>
                <div class="form-group">
                    <input type="hidden" class="form-control input-sm" id="contact_type" name="contact_type" value="customer">
                    @if($errors->has('city'))
                        <span class="help-block red font-small-3">{{ $errors->first('city') }}</span>
                    @endif
                </div>
                <div class="row">
                <div class="col-md-3">
                <div class="form-group">
                    {{-- <label>Salutation <span class="red">*</span></label> --}}
                    <select class="form-control input-sm" id="salutation" name="salutation">
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Ms.">Ms.</option>
                        <option value="Miss">Miss</option>
                        <option value="Dr.">Dr.</option>
                    </select>
                    @if($errors->has('salutation'))
                        <span class="help-block red font-small-3">{{ $errors->first('salutation') }}</span>
                    @endif
                </div>
                </div>

                <div class="col-md-5">
                <div class="form-group">
                    {{-- <label>First Name <span class="red">*</span></label> --}}
                    <input type="text" class="form-control input-sm" id="first_name" name="first_name" placeholder="First Name*">
                    @if($errors->has('first_name'))
                        <span class="help-block red font-small-3">{{ $errors->first('first_name')}}</span>
                    @endif
                </div>
                </div>

                <div class="col-md-4">
                <div class="form-group">
                    {{-- <label>Last Name <span class="red">*</span></label> --}}
                    <input type="text" class="form-control input-sm" id="last_name" name="last_name" placeholder="Last Name*">
                    @if($errors->has('last_name'))
                        <span class="help-block red font-small-3">{{ $errors->first('last_name') }}</span>
                    @endif
                </div>
                </div>
                </div>

                <div class="form-group">
                    {{-- <label>Mobile <span class="red">*</span></label> --}}
                    <input type="text" class="form-control input-sm" id="mobile" name="mobile" placeholder="Mobile*">
                    @if($errors->has('mobile'))
                        <span class="help-block red font-small-3">{{ $errors->first('mobile') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    {{-- <label>Email <span class="red">*</span></label> --}}
                    <input type="email" class="form-control input-sm" id="email" name="email" placeholder="Email">
                    @if($errors->has('last_name'))
                        <span class="help-block red font-small-3">{{ $errors->first('last_name') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    {{-- <label>Company Name <span class="red">*</span></label> --}}
                    <input type="text" class="form-control input-sm" id="company_name" name="company_name" placeholder="Company Name">
                    @if($errors->has('last_name'))
                        <span class="help-block red font-small-3">{{ $errors->first('last_name') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    {{-- <label>Website <span class="red">*</span></label> --}}
                    <input type="text" class="form-control input-sm" id="website" name="website" placeholder="Website">
                    @if($errors->has('last_name'))
                        <span class="help-block red font-small-3">{{ $errors->first('last_name') }}</span>
                    @endif
                </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-custom">Save</button>
            <button type="button" class="btn btn-default-custom" data-dismiss="modal">Close</button>
        </div>
        </form>

    </div>
  </div>
</div>