jquery - Selectable optgroups in Select2 -

i want create multilevel select2 options indentation don't want use optgroup elements because want allow select main categories. there way style if select2?

my raw html select looks this:

<select class="js-select-multiple">   <option class="l1">option 1</option>   <option class="l2">suboption 1</option>   <option class="l2">suboption 2</option>   <option class="l2">suboption 3</option>   <option class="l1">option 2</option>   ... </select> <script>$(".js-select-multiple").select2({maximumselectionlength: 5});</script> 

so without using select2 can add text-indent property .l2 class. seems select2 doesn't use classes used option, styling classes won't work.

is there workaround that?

you're correct in recognizing select2 not carry css classes <option> tags results list. has not explicitly tying results list existing <option> tags, , having set of sensible defaults. it's easier add ability transfer classes afterwards remove them.

you can overriding templateresult , getting original option data.element (where data first parameter).

$('.select2').select2({    templateresult: function (data) {          // care if there element pull classes      if (!data.element) {        return data.text;      }        var $element = $(data.element);        var $wrapper = $('<span></span>');      $wrapper.addclass($element[0].classname);        $wrapper.text(data.text);        return $wrapper;    }  });

.l2 {    padding-left: 1em;  }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>    <select class="select2" style="width: 200px">    <option class="l1">option 1</option>    <option class="l2">suboption 1</option>    <option class="l2">suboption 2</option>    <option class="l2">suboption 3</option>    <option class="l1">option 2</option>  </select>

note using padding-left instead of text-indent, select2 uses nested options.