如何为 select2 列表的每个项目创建一个按钮?
How to create a button for each item of a select2 list?
我需要在加载期间在 select2 组件中的每个列表项旁边创建一个按钮(视图)。
我在网上找不到任何可以帮助我的东西。
有人知道怎么做吗?
$("#MySelect2").select2({
tags: "true",
createTag: function () {
// Dessabilita a inserção quando Enter for pressionada
return null;
},
placeholder: "Selecione uma opção",
allowClear: false,
width: '100%',
dropdownParent: genericModal,
language: {
noResults: function () {
return "Nenhum resultado encontrado";
}
}
});
<div class="col-md-4">
<label asp-for="ParentescoTipoId" class="control-label">Tipo de Parentesco</label>
<select asp-for="ParentescoTipoId" asp-items="Model.ParentescosTipos" id = "MySelect2" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"><option value=""></option></select>
<span asp-validation-for="ParentescoTipoId" class="text-danger"></span>
</div>
谢谢:)
这应该可以做到。
你必须使用 templateResult.
这样就可以为每个元素添加一个按钮。
为了唯一性,我添加了一个 data-id 属性。
$(document).ready(function() {
$('.js-example-basic-single').select2({
minimumInputLength: -1,
placeholder: 'Search',
data: [{
id: 1,
text: "First"
}, {
id: 2,
text: "Second"
}],
templateResult: function(data) {
var $result = $("<span></span>");
console.log('data', data.id);
$result.text(data.text);
$result.append('<button data-id="' + data.id + '" class="btn">' + data.text + '</button>');
return $result;
}
});
});
.btn {
float:right;
}
.js-example-basic-single {
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 class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
我需要在加载期间在 select2 组件中的每个列表项旁边创建一个按钮(视图)。 我在网上找不到任何可以帮助我的东西。 有人知道怎么做吗?
$("#MySelect2").select2({
tags: "true",
createTag: function () {
// Dessabilita a inserção quando Enter for pressionada
return null;
},
placeholder: "Selecione uma opção",
allowClear: false,
width: '100%',
dropdownParent: genericModal,
language: {
noResults: function () {
return "Nenhum resultado encontrado";
}
}
});
<div class="col-md-4">
<label asp-for="ParentescoTipoId" class="control-label">Tipo de Parentesco</label>
<select asp-for="ParentescoTipoId" asp-items="Model.ParentescosTipos" id = "MySelect2" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"><option value=""></option></select>
<span asp-validation-for="ParentescoTipoId" class="text-danger"></span>
</div>
谢谢:)
这应该可以做到。
你必须使用 templateResult.
这样就可以为每个元素添加一个按钮。
为了唯一性,我添加了一个 data-id 属性。
$(document).ready(function() {
$('.js-example-basic-single').select2({
minimumInputLength: -1,
placeholder: 'Search',
data: [{
id: 1,
text: "First"
}, {
id: 2,
text: "Second"
}],
templateResult: function(data) {
var $result = $("<span></span>");
console.log('data', data.id);
$result.text(data.text);
$result.append('<button data-id="' + data.id + '" class="btn">' + data.text + '</button>');
return $result;
}
});
});
.btn {
float:right;
}
.js-example-basic-single {
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 class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>