Menu
I'm having trouble using the Select2 with various groups, only the latter appears.
<select name="txtConta" id="txtConta" data-placeholder="Selecione a conta">
<option value=""></option>
<option value="S11892">2 - Gastos</option>
<option value="S11893">2.1 - DESPESA OPERACIONAL FIXA</option>
<option value="S11895">2.1.1 - PESSOAL</option>
<option value="S11915">2.1.1.1 - GERENCIA/ADMINSTRATIVO</option>
<option value="11916">2.1.1.1.1 - SALÁRIOS</option>
<option value="11917">2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS</option>
<option value="11918">2.1.1.1.3 - INSS</option>
<option value="11919">2.1.1.1.4 - FGTS</option>
<option value="11920">2.1.1.1.5 - IRRF COD. 0561</option>
<option value="11921">2.1.1.1.6 - PLANO DE SAUDE</option>
<option value="11922">2.1.1.1.7 - TICKET REFEICAO</option>
<option value="11923">2.1.1.1.8 - VALE TRANSPORTE</option>
(...)
</select>
<script>
$('select').each(function () {
$(this).select2({
allowClear: true,
width: 'resolve',
dropdownAutoWidth: true
});
});
$('#txtConta').find('option').each(function () {
if ($(this).attr("value").indexOf('S') == 0) {
$('<optGroup/>').attr('label', $(this).text()).appendTo($('#txtConta'));
$(this).remove();
} else {
$('#txtConta').find('optGroup').last().append($(this));
}
});
</script>
You can see a demonstration in this jsfiddle.
866
This solution was tested using select2 version 4.0.1, and you can do this way:
Pass one array that contains one attribute more (the level of every node in the hierarchy). The array's structure is simple
Create a function to format results,that is, how looks like every item according its level inside of hierarchy
When initialize select, set the function created to attribute templateResult
You can see in the follow code:
$(document).on("ready", function() {
var data = [{
id: "2",
text: "2 - Gastos",
level: 1
}, {
id: "2.1",
text: "2.1 - DESPESA OPERACIONAL FIXA",
level: 2
}, {
id: "2.1.1",
text: "2.1.1 - PESSOAL",
level: 3
}, {
id: "2.1.1",
text: "2.1.1 - PESSOAL",
level: 4
}, {
id: "2.1.1.1",
text: "2.1.1.1 - GERENCIA/ADMINSTRATIVO",
level: 4
}, {
id: "2.1.1.1.1",
text: "2.1.1.1.1 - SALÁRIOS",
level: 5
}, {
id: "2.1.1.1.2",
text: "2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS",
level: 5
}, {
id: "2.1.1.1.3",
text: "2.1.1.1.3 - INSS",
level: 5
}, {
id: "2.1.1.1.4",
text: "2.1.1.1.4 - FGTS",
level: 5
}];
function formatResult(node) {
var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
return $result;
};
$("#mySelect").select2({
placeholder: 'Select an option',
width: "600px",
data: data,
formatSelection: function(item) {
return item.text
},
formatResult: function(item) {
return item.text
},
templateResult: formatResult,
});
});<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select id="mySelect">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
