如何在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

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

Answer 4

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

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

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

（可选）可以使用清除按钮（做出选择后可见）将选择框重置回占位符值。

https://select2.org/placeholders

Answer 5

这对我有用：

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

希望这有帮助:)

Answer 6

在当前版本的

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>

Answer 7

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

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

并在您的脚本中使用：

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

Answer 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.在 select 标签中设置 data-placeholder 属性 2.在您选择的第一个标签中设置空标签

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

Answer 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>

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

Answer 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>

Answer 13

在选择元素的第一个位置包含空选项的所有答案都是正确的，但仅在未选择任何选项时才有效。

我使用了 @Colin 的解决方案 -

$('.wcl-select').prepend('<option selected=""></option>').select2({placeholder: "Select Month"})

- 但是，当我们选择一个选项时，我们将有两个选项标记为已选择，无法正确显示所选项目：

在应用 Select2 之前，我会检查是否选择了任何选项，然后在第一个位置创建空选项：

$(".wcl-select").each(function(_, element) {
    if (!$(element).find('option[selected]').length) {
        $(element).prepend("<option value='' selected='selected'></option>");
    }
});

$(".wcl-select").select2({
    amdLanguageBase: './select2/i18n/',
    theme: "bootstrap-5",
    width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
    placeholder: $(this).data('placeholder'),
    allowClear: false,
    closeOnSelect: true,
    multiple: false,
});

Answer 14

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

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

Answer 15

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