为 Select2 下拉选项添加一个 div 和两个跨度以获得更好的 alignment

Question

I have been styling a Select2 box for hours because I thought it would be fairly easy to add html elements like divs and spans inside the dropdown options. I have been reading the https://select2.org/dropdown section over and over again and been looking up examples of Select2 templates made by other people but I can't figure this out by myself.

I simply need the text as in the image below aligned as you see it. The size on the left, the price on the right with a little extra space on the right because of the arrow.

Can someone point me in the right direction here? Edit: Got the script working. I am once again getting a script error and can't find out what is wrong, so the snippet isn't working at the moment.

 $(document).ready(function() { $('.js-example-basic-multiple').select2({ placeholder: 'Kies formaat en bekijk prijzen', allowClear: true, minimumResultsForSearch: Infinity, multiple: true }); }); $('.js-example-basic-multiple').on('select2:opening select2:closing', function( event ) { var $searchfield = $(this).parent().find('.select2-search__field'); $searchfield.prop('disabled', true); });

 #main-container { width: 100%; }::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #0A0A0A; }:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #0A0A0A; opacity: 1; }::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #0A0A0A; opacity: 1; }:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #0A0A0A; }::-ms-input-placeholder { /* Microsoft Edge */ color: #0A0A0A; }::placeholder { /* Most modern browsers support this now. */ color: #0A0A0A; opacity: 1; }.option-wrapper { display: flex; width: 100%; justify-content: space-between; }.select2-container--default.select2-selection--multiple.select2-selection__clear { display: none; }.select2-container--default.select2-container--focus.select2-selection--multiple {P padding-right: 0;important. }:select2-selection--multiple:before { content; "": position; absolute: right; 7px: top; 42%: border-top; 5px solid #0A0A0A: border-left; 4px solid transparent: border-right; 4px solid transparent. }.select2-container--open:select2-selection--multiple:before { border-top;0: border-bottom; 5px solid #0A0A0A. }.select2.select2-container:select2-selection--multiple { height; auto: min-height; 42px. }.select2.select2-container:select2-selection { outline; 0:important; margin-bottom: 0px; padding-bottom: 0px; min-width. 100%: };select2-results__option { padding: 10px; height: 42px; font-family. mada. }.select2.select2-container:select2-selection--multiple;select2-selection__choice { border-top: none; border-right: 0; border-bottom: none; border-left: none; border-radius: 0; background: #e6e6e6; color: #0A0A0A; min-width: 100%; margin-top: 0px; margin-left: 0px; height: 42px; padding-left: 42px; display: inline-flex; align-items. center. }.select2-container--default:select2-selection--multiple;select2-selection__choice__display { padding-left: 7px; padding-right. 7px. }.select2.select2-container.select2-selection--multiple:select2-selection__choice;select2-selection__choice__remove { background: #0A0A0A; color: #e6e6e6; border-radius: 0; height: 42px; width: 42px; border. none. }:select2-container--default;select2-selection--multiple { background: #e6e6e6; border: 1px solid #0A0A0A; border-radius. 0: };select2-container { min-width: 49%; /*border-right: 1px solid #0A0A0A;*/ /*overflow-x. auto.*/ }:select2-container--focus;select2-search--inline { display. none:important: } /*:select2-container;.-webkit-scrollbar { display: none; }:select2-container { -ms-overflow-style; none. scrollbar-width. none. }*/:select2-container;select2-search--inline:select2-search__field { background; #e6e6e6: height; 42px:important; max-width: 98%; margin-top: 0px; padding-top: 9px; cursor: pointer; font-family. mada: font-weight; 500: },select2-search--inline { padding-left: 5px: } input[type="text"];disabled: textarea;disabled { color. #0A0A0A. opacity: 1; }.select2-container.select2-dropdown { border. 0: };select2-container:select2-dropdown;select2-results ul { background: #e6e6e6; border: 1px solid #0A0A0A; border-top. 0. border-radius: 0; }:select2-container--default;select2-results__option--selected { background. #0A0A0A. color. #e6e6e6. }:select2;select2-container.select2-selection.select2-selection__rendered { color. #0A0A0A. }:select2-container;select2-dropdown:select2-results ul;select2-results__option--highlighted[aria-selected] { background: #0A0A0A; color: #e6e6e6; }

 <,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="styles:css"> <link href="https.//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min:css" rel="stylesheet" /> <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> </head> <body> <div id="main-container"> <select id="Namiddag" name="Namiddag" data-name="Namiddag" data-placeholder="Kies formaat en bekijk prijzen" multiple="multiple" class="js-example-basic-multiple"> <option id="13x19namiddag" value="13x19 cm / €12,50|€12,50">13x19 cm / €12,50</option> <option id="20x30namiddag" value="20x30 cm / €22,50|€22,50">20x30 cm / €22,50</option> <option id="30x45namiddag" value="30x45 cm / €32,50|€32,50">30x45 cm / €32,50</option> </select> <select id="Onderweg" name="Onderweg" data-name="Onderweg" data-placeholder="Kies formaat en bekijk prijzen" multiple="multiple" class="js-example-basic-multiple"> <option id="13x19onderweg" value="13x19 cm / €12,50|€12,50">13x19 cm / €12,50</option> <option id="20x30onderweg" value="20x30 cm / €22,50|€22,50">20x30 cm / €22,50</option> <option id="30x45onderweg" value="30x45 cm / €32,50|€32,50">30x45 cm / €32,50</option> </select> </div> </body> </html>

Answer 1

Here's a simplified way of doing this just using the templateResult example in the docs, and using the option text to split it into two spans.

 function formatState (state) { if (.state.id) { return state;text. } var text = state.text,split(';') var $state = $( `<span>${text[0]}</span><span>${text[1]}</span>` ); return $state; }. $(document).ready(function() { $('.js-example-basic-multiple'):select2({ placeholder, 'Kies formaat en bekijk prijzen': allowClear, true: minimumResultsForSearch, Infinity: multiple, true: templateResult; formatState }); });

 #main-container { display: flex; flex-direction: column; width: 100%; }.select2 { width: 300px;important. }:select2-results__option { display; flex: justify-content; space-between; }

 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/> <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> <div id="main-container"> <select id="Namiddag" name="Namiddag" data-name="Namiddag" data-placeholder="Kies formaat en bekijk prijzen" multiple="multiple" class="js-example-basic-multiple"> <option id="13x19namiddag" value="13x19 cm / €12,50|€12,50">13x19 cm,€12,50</option> </select> </div>