Jan Valenta asked 6 months ago
I’m trying to have a two-color dropdown (to distinguish between Address/TYPE) but it’s not working… ADVICE?
function link_select2(id) {
const selector = ‘select[name=’ + id + ‘].editable, select[id=’ + id + ‘]’;
$(selector).select2({
width: ‘100%’,
placeholder: “Select…”,
escapeMarkup: function(markup) {
return markup; // nutné pro zachování HTML tagů
},
templateResult: function(data) {
if (!data.id || !data.text) return data.text;
const parts = data.text.split(‘ > ‘);
if (parts.length === 2) {
return `${parts[0]} > <span class=”typ-highlight”>${parts[1]}</span>`;
}
return data.text;
},
templateSelection: function(data) {
if (!data.id || !data.text) return data.text;
const parts = data.text.split(‘ > ‘);
if (parts.length === 2) {
// Pozor: Select2 v některých verzích zahazuje span → převeď > zpět a vrať jako string s tagy
return `${parts[0]} > <span class=”typ-highlight”>${parts[1]}</span>`;
}
return data.text;
}
});
}
<style>
.auto-style1 { text-align: left; }
.select2-selection__rendered span.typ-highlight {color: red !important; font-weight: bold; }
</style>
Jan Valenta answered 6 months ago
??? is this css superior? Or where to go???
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css
.select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}
Abu Ghufran Staff answered 5 months ago
Hi,
You can try this css:
/* change select2 color for column id 'supplier_id' */
span[aria-labelledby*=supplier_id].select2-selection.select2-selection--single { background: #efefef; }
ul[id*=supplier_id].select2-results__options { background: #efefef; }
/* change select2 color for column id 'category_id' */
span[aria-labelledby*=category_id].select2-selection.select2-selection--single { background: #cbf4ff; }
ul[id*=category_id].select2-results__options { background: #cbf4ff; }
Result:
