jQuery 如何在select2框架中使用占位符作为默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21413241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use placeholder as default value in select2 framework
提问by Gottfried
To get the chosen value of a select2I'm using:
要获得select2我正在使用的 a 的选定值：
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
问题是如果没有选择值，这会抛出一个错误，我想知道如果没有选择任何选项，是否有任何方法可以让它返回占位符
回答by meherzi.sahbi
You have to add an empty option (i.e. <option></option>) as a first element to see a placeholder.
您必须添加一个空选项（即<option></option>）作为第一个元素才能看到占位符。
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."
“请注意，由于浏览器假定在非多值选择框中选择了第一个选项元素，因此必须提供空的第一个选项元素 ( <option></option>) 才能使占位符起作用。”
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"
});
回答by Oleg Sewruk
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>
回答by Colin
$('#ddlSelect').prepend('<option selected=""></option>').select2({placeholder: "Select Month"});
回答by Cristina Cristea
$("#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.
占位符可以通过附加到选择的数据占位符属性来声明，或者通过示例代码中看到的占位符配置元素来声明。
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.
或者，可以使用清除按钮（在进行选择后可见）将选择框重置回占位符值。
回答by Ignacio Franco
This worked for me:
这对我有用：
$('#SelectListId').prepend('<option selected></option>').select2({
placeholder: "Select Month",
allowClear: true
});
Hope this help :)
希望这有帮助:)
回答by LipeTuga
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
});
回答by Omid Ahmadyani
you can init placeholder in you select html code in two level such as:
您可以在两个级别中选择 html 代码中的 init 占位符，例如：
<select class="form-control select2" style="width: 100%;" data-placeholder="Select a State">
<option></option>
<option>?????</option>
<option>????</option>
<option>??????</option>
<option>?????</option>
<option>?????</option>
<option>?????</option>
<option>???</option>
</select>
1.set data-placeholder attribute in your select tag 2.set empty tag in first of your select tag
1.在选择标签中设置数据占位符属性 2.在选择标签的第一个中设置空标签
回答by admirm
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);
回答by Raham
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>
回答by denismart
The simplestway 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
});
});
}
