如何在select2框架中使用占位符作为默认值

要获得我正在使用的select2的选择值：

 var x = $("#select").select2('data'); var select_choice = x.text 

问题是，如果没有选择值，则抛出错误，我想知道是否有任何方法使它返回占位符，如果没有选择选项

Answer 1

您必须添加一个空选项（即 ）作为查看占位符的第一个元素。

来自Select2官方文档：

“请注意，因为浏览器假定在非多值选择框中选择了第一个选项元素，所以必须提供空的第一个选项元素（ ）才能使占位符生效。”

希望这可以帮助。

例：

   Germany France Spain  

而Javascript将是：

 $('#countries').select2({ placeholder: "Please select a country" }); 

Answer 2

把它放在你的脚本文件中：

 $('select').select2({ minimumResultsForSearch: -1, placeholder: function(){ $(this).data('placeholder'); } }); 

然后在HTML中，添加以下代码：

   <------ this is where your placeholder data will appear Value 1 Value 2 Value 3 Value 4 Value 5  

Answer 3

 $("#e2").select2({ placeholder: "Select a State", allowClear: true }); $("#e2_2").select2({ placeholder: "Select a State" }); 

占位符可以通过附加到select的data-placeholder属性声明，也可以通过占位符配置元素声明，如示例代码中所示。

当占位符用于非多值选择框时，它要求您包含空标记作为第一个选项。

可选地，可以使用清除按钮（在进行选择后可见）将选择框重置回占位符值。

https://select2.org/placeholders

Answer 4

 $('#ddlSelect').prepend('').select2({placeholder: "Select Month"}); 

Answer 5

这对我有用：

 $('#SelectListId').prepend('').select2({ placeholder: "Select Month", allowClear: true }); 

希望这有帮助:)

Answer 6

在你的html上使用一个空的占位符，如：

  red blue  

并在您的脚本中使用：

 $(".select2").select2({ placeholder: "Select a color", allowClear: true }); 

Answer 7

我做了以下事情：

 var defaultOption = new Option(); defaultOption.selected = true; $(".js-select2").append(defaultOption); 

对于我使用的其他选项：

 var realOption = new Option("Option Value", "id"); realOption.selected = false; $(".js-select2").append(realOption); 

Answer 8

试试这个。在html中你写下面的代码。

  Alaska Hawaii  

并在您的脚本中编写以下代码。请记住，具有select2js的链接。

Answer 9

在所有之前添加空“选项”的最简单方法。

例：

   Alaska Hawaii  

如果你需要，还有js代码：

 $(document).ready(function() { $(".select2").select2({ placeholder: "Select a state", allowClear: true }); }); } 

Answer 10

 $selectElement.select2({ minimumResultsForSearch: -1, placeholder: 'SelectRelatives'}).on('select2-opening', function() { $(this).closest('li').find('input').attr('placeholder','Select Relative'); });