Je souhaite ajouter un bouton dans le premier élément de la liste à "Ajouter un nouvel élément". Si l'utilisateur clique sur ce bouton, je dois ouvrir une fenêtre contextuelle pour obtenir les commentaires des utilisateurs .. Comment faire cela dans le plugin select2? Y a-t-il des options par défaut pour ceci (ou) besoin de le personnaliser?
en gros ce que Kld a suggéré, mais sans boutons supplémentaires si je comprends bien, OP veut utiliser la première option de select
pour déclencher une nouvelle valeur modale. Il vérifie la valeur lorsque l'événement select2: close est déclenché et si "NEW"
est sélectionné, demande la nouvelle valeur, ajoute à la fin de la case select
et la sélectionne.
REMARQUE: j'ai désactivé la recherche en entrée et ajouté un espace réservé
$(function () {
$(".select2")
.select2({
placeholder: 'Select type',
width: '50%',
minimumResultsForSearch: Infinity
})
.on('select2:close', function() {
var el = $(this);
if(el.val()==="NEW") {
var newval = Prompt("Enter new value: ");
if(newval !== null) {
el.append('<option>'+newval+'</option>')
.val(newval);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="mySel" class="select2">
<option></option>
<option value="NEW">Add new type</option>
<option>Car</option>
<option>BUS</option>
<option>TWO</option>
<option>THREE</option>
</select>
jQuery("#select2-"+yourelementid+"-container").off().on('click',function(){
jQuery("#yourelementid"_add").remove();
jQuery("#select2-"+yourelementid+"-results").after("<div id='"+yourelementid+"_add' >optionnameforadding</div> ").promise().done(function(){
jQuery("#"+yourelementid+"_add").off().on('click',function(){
// yourfunctionfordisplayingdiv
});
});
});
vous pouvez ajouter du contenu html après la liste ul - select2 - "+ yourelementid +" - results et faire tout ce que vous pourrez avec. il suffit de définir le résultat comme valeur de la zone de sélection
Peut-être devriez-vous utiliser les options tags
?
https://select2.github.io/options.html#can-options-be-created-based-on-the-search-term
Vous pouvez ajouter une nouvelle option au select2 de cette façon
$('button').click(function(){
var value = Prompt("Please enter the new value");
$(".mySelect")
.append($("<option></option>")
.attr("value", value )
.text(value ));
})
Essayez ça ça marche pour moi
$('#yourDropdownId').select2({
ajax: {
url: productUrl,
dataType: 'json',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
},processResults: function (data, params) {
console.log(data)
return {
results: $.map(data.items, function (item) {
return {
text: item.item_name,
id: item.item_id
}
})
};
},
cache: true,
},language: {
noResults: function() {
return "<a data-toggle='modal' data-target='#myModal' href='javascript:void();'>Open Model</a>";
}
},escapeMarkup: function (markup) {
return markup;
}
});