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

To get the chosen value of a select2 I'm using:

要获取我正在使用的select2的选择值:

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

The problem is this throws an error if not value has been selected and I was wondering if there was any way to make it return the placeholder if no option is selected

问题是，如果没有选择值，就会抛出一个错误，我想知道如果没有选择选项，是否有办法使它返回占位符

10 个解决方案

#1

You have to add an empty option (i.e. <option></option>) as a first element to see a placeholder.

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

From Select2 official documentation :

从Select2官方文件:

"Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>) for the placeholder to work."

“注意，由于浏览器假定在非多值选择框中选择了第一个选项元素，因此必须为占位符提供一个空的第一个选项元素()以使占位符发挥作用。”

Hope this helps.

希望这个有帮助。

Example:

例子:

<select id="countries">
    <option></option>
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Spain</option>
</select>

and the Javascript would be:

Javascript是:

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

#2

Put this in your script file:

把这个放在你的脚本文件中:

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

And then in HTML, add the following code:

然后在HTML中添加以下代码:

<select data-placeholder="Your Placeholder" multiple>
    <option></option> <------ this is where your placeholder data will appear
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>

#3

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

The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code.

占位符可以通过附加到select的数据占位符属性声明，也可以通过示例代码中看到的占位符配置元素声明。

When placeholder is used for a non-multi-value select box, it requires that you include an empty tag as your first option.

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

Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.

可选地，一个clear按钮(选中后可见)可用来将选择框重新设置为占位符值。

https://select2.org/placeholders

https://select2.org/placeholders

#4

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

#5

Use a empty placeholder on your html like:

在html中使用一个空的占位符，比如:

<select class="select2" placeholder = "">
    <option value="1">red</option>
    <option value="2">blue</option>
</select>

and in your script use:

在你的剧本中:

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

#6

I did the following:

我做了以下几点:

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

For other options I use then:

对于我当时使用的其他选项:

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

#7

This worked for me:

这工作对我来说:

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

Hope this help :)

希望这有助于:)

#8

Try this.In html you write the following code.

试试这个。在html中，您编写以下代码。

<select class="select2" multiple="multiple" placeholder="Select State">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

And in your script write the below code.Keep in mind that have the link of select2js.

在你的脚本中写下下面的代码。记住，有select2js的链接。

<script>
         $( ".select2" ).select2( { } );
 </script>

#9

The simplest way to add empty "option" before all.

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

<option></option>

Example:

例子:

<select class="select2" lang="ru" tabindex="-1">
    <option></option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

Also js code, if you need:

还有js代码，如果需要:

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

#10

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