从 jQuery 创建选项时，在 select2 中添加一个空选项

Posted 2023-05-07

【中文标题】从 jQuery 创建选项时，在 select2 中添加一个空选项

【英文标题】：Add an empty option in select2 when options are created from jQuery

【发布时间】：2022-01-16 20:29:32

【问题描述】：

当我从jQuery 设置选项时，我尝试添加一个空的<option></option>，但在加载页面时选择了第一个选项。我添加了allowClear: true, placeholder: "Select...",，但没有成功。

我找到了一个四处走走，在我初始化select2 后清除该选项，这可行但有更好的解决方案吗？

$(".select2-it").val(null).trigger('change');

var itData = [
    id: 0,
    text: 'Apps',
    children: [
        id: '1',
        text: 'App1'
      ,
      
        id: '2',
        text: 'App2'
      ,
      
        id: '3',
        text: 'App3'
      
    ]
  ,
  
    id: 4,
    text: 'bug'
  ,
  
    id: 5,
    text: 'duplicate'
  
];

$(".select2-it").select2(
  allowClear: true,
  placeholder: "Select...",
  data: itData,
  width: "100%"
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<select id="it-target" class="select2-it form-control"></select>

【问题讨论】：

为什么要添加一个空选项？

该选项在我的表单中是必需的，我希望用户选择一个值而不是第一个选项。

【参考方案1】：

您可以在对输入调用 Select2 初始化程序之前在 DOM 元素中添加空选项（使用 .prepend()）。

var itData = [
    id: 0,
    text: 'Apps',
    children: [
         id: '1', text: 'App1' ,
         id: '2', text: 'App2' ,
         id: '3', text: 'App3' 
    ]
, 
    id: 4,
    text: 'bug'
, 
    id: 5,
    text: 'duplicate'
];

$(".select2-it").prepend('<option></option>').select2(
    allowClear: true,
    placeholder: "Select...",
    data: itData,
    width: "100%"
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<select id="it-target" class="select2-it form-control"></select>