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

Question

要获得select2我正在使用的所选值:

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

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

Answer 1

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

从Select2官方文档:

"请注意,因为浏览器假设在非多值选择框中选择了第一个选项元素,所以必须提供空的第一个选项元素(<option></option>)以使占位符起作用."

希望这可以帮助.

例:

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

而Javascript将是:

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

Answer 2

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

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

然后在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>

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('<option selected=""></option>').select2({placeholder: "Select Month"});

Answer 5

这对我有用：

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

希望这有帮助:)