在Modal的Select2下拉列表中未显示PlaceHolder

时间:2019-10-21 11:09:14

标签: jquery jquery-select2

我在模态上使用Select2。我正在使用multiple="multiple"属性。我的Select2在BootStrap模式中。我的HTML代码如下所示

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

我的jQuery代码如下所示

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

但是PlaceHolder没有显示。

1 个答案:

答案 0 :(得分:1)

我可以看到占位符,一定存在版本控制问题

$(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>

在您的情况下,请尝试为占位符赋予不同的颜色

::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;
}