1

I am using Select2 on a Modal. I am using multiple="multiple" attribute. My Select2 is inside a BootStrap Modal. My HTML code is like below

<select class="form-control dropdown my_select" multiple="multiple">
   <option value="example1">Example1</option>
   <option value="example2">Example2</option>
</select>

My jQuery code is like below

$(document).ready(function() {                
  $('#modelId').on('shown.bs.modal', function (e) {
     $('.dropdown').select2({
        placeholder: 'Select an option',
     });
  });
});

But PlaceHolder is not displaying.

abu abu
  • 6,599
  • 19
  • 74
  • 131
  • 2
    Possible duplicate of [Placeholder not working in select2](https://stackoverflow.com/questions/46148297/placeholder-not-working-in-select2) – Alex83690 Oct 21 '19 at 12:09
  • Thanks @Alex83690. I am using multiple="multiple" attribute – abu abu Oct 21 '19 at 12:38
  • 1
    Yes but you don't have a blank (or disabled) first option like the replies in that link suggest. – mark_b Oct 21 '19 at 12:50

1 Answers1

1

I can see the placeholder , there must be some versioning issue

$(document).ready(function() {                
  
     $('.dropdown').select2({
        placeholder: 'Select an option',
     
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<select class="form-control dropdown my_select" multiple="multiple">
   <option value="example1">Example1</option>
   <option value="example2">Example2</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

In your case just try to give diffrent color to placeholder

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}
DEEPAK
  • 1,364
  • 10
  • 24