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

【问题标题】：How to use placeholder as default value in select2 framework如何在 select2 框架中使用占位符作为默认值
【发布时间】：2014-02-20 04:52:17
【问题描述】：

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

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

问题是如果没有选择值，这会引发错误，我想知道如果没有选择任何选项，是否有任何方法让它返回占位符

【问题讨论】：

= f.input :field, collection: Field.all, as: :select, input_html: { data: { placeholder: 'Choose your country' } }, label_method: :name, value_method: : alpha2，必填：true

标签： jquery jquery-selectors jquery-select2

【解决方案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"
});

【讨论】：

我不明白。你能给我举个例子吗？
如果我从 ajax 填充数据会怎样？

【解决方案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>

【讨论】：

IMO 这是多选和单选的最佳方法
这可行，但您需要添加一个空选项作为选择中的第一个元素。另外，您不需要 "minimumResultsForSearch: -1 " 。即如果您只有 1 个结果，您将无法选择任何内容。
根据docs，“占位符”不接受函数作为值。这仅适用于select2 uses data-* attributes 填充占位符

【解决方案3】：

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

【讨论】：

+1 在当前版本中，必须选择空选项： $('#ddlSelect').prepend('').select2( {placeholder: "选择月份"});
这个答案不正确。因为 prepend 将在每次分配值之后调用。所以如果你有 1000 个值，那么你会得到 1000 个 prepend。
@AnkurSoni 你想说什么？这个解决方案对我很有效
这是很酷的解决方案，非常感谢，我一直在努力解决“通过 SELECT2 DROPDOWN 通过 AJAX 提交表单”

【解决方案4】：

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

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

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

可选地，一个清除按钮（一旦做出选择就可见）可用于将选择框重置为占位符值。

https://select2.org/placeholders

【讨论】：

请注意，选择字段的选项列表必须包含一个空选项<option></option>，占位符适用于单个选择字段。对我来说是个错误。
这是一个工作示例

【解决方案5】：

这对我有用：

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

希望得到帮助:)

【讨论】：

【解决方案6】：

在您的 html 上使用空占位符，例如：

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

并在您的脚本中使用：

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

【讨论】：

【解决方案7】：

在当前版本的select2 中，您只需添加属性data-placeholder="A NICE PLACEHOLDER"。 select2 将自动分配占位符。请注意：在选择中添加一个空的<option></option> 仍然是强制性的。

<select id="countries" data-placeholder="***A NICE PLACEHOLDER***">
  <option></option>
  <option value="1">Germany</option>
  <option value="2">France</option>
  <option value="3">Spain</option>
</select>

【讨论】：

【解决方案8】：

你可以在你选择的两级html代码中初始化占位符，例如：

<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.在你的选择标签中设置数据占位符属性 2.在您的选择标签的第一个设置空标签

【讨论】：

【解决方案9】：

我做了以下事情：

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);

【讨论】：

【解决方案10】：

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

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

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

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

【讨论】：

【解决方案11】：

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

<option></option>

例子：

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

还有js代码，如果需要的话：

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

【讨论】：

【解决方案12】：

我尝试了所有这些，最后，只需使用 title="text here" 即可为我的系统工作。注意没有空白选项

<select name="Restrictions" class="selectpicker show-tick form-control" 
        data-live-search="true" multiple="multiple" title="Choose Multiple">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

【讨论】：

【解决方案13】：

只需将此类添加到您的 .css 文件中即可。

.select2-search__field{width:100% !important;}

【讨论】：

【解决方案14】：

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

【讨论】：