当从 jQuery 创建选项时,在 select2 中添加一个空选项
Add an empty option in select2 when options are created from jQuery
当我设置 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>
您可以在 DOM 元素中添加空选项(使用 .prepend()),然后再对您的输入调用 Select2 初始值设定项。
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>
当我设置 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>
您可以在 DOM 元素中添加空选项(使用 .prepend()),然后再对您的输入调用 Select2 初始值设定项。
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>