Use groups with select2.js. Clicking a group name adds all sub-items.

select2-groups.js

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.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>
<style>
    * {font-family: Verdana; font-size: 12px; }
    option:nth-child(1), option:nth-child(4) { font-weight:bold; }
    .select2-results__option[aria-selected=true] { display: none; }
    .hddn { display: none; }
    .main-option { font-weight: bold; }
    .secondary-option { margin-left: 10px; }
</style>


<div class="col-sm-8">
    <select id="e2" multiple style="width:100% !important" class="populate">
        <option value="1_0" id="pr-1_0" data-myid="1_0" class="s-option main-option">Food</option>
        <option value="1_1" id="pr-1_1" data-myid="1_1" class="s-option secondary-option">food 1</option>
        <option value="1_2" id="pr-1_2" data-myid="1_2" class="s-option secondary-option">food 2</option>
        <option value="1_3" id="pr-1_3" data-myid="1_3" class="s-option secondary-option">food 3</option>
        <option value="1_4" id="pr-1_4" data-myid="1_4" class="s-option secondary-option">food 4</option>
        <option value="1_5" id="pr-1_5" data-myid="1_5" class="s-option secondary-option">food 5</option>
        <option value="1_6" id="pr-1_6" data-myid="1_6" class="s-option secondary-option">food 6</option>
        <option value="1_7" id="pr-1_7" data-myid="1_7" class="s-option secondary-option">food 7</option>
        <option value="1_8" id="pr-1_8" data-myid="1_8" class="s-option secondary-option">food 8</option>
        <option value="1_9" id="pr-1_9" data-myid="1_9" class="s-option secondary-option">food 9</option>
        <option value="1_10" id="pr-1_10" data-myid="1_10" class="s-option secondary-option">food 10</option>

        <option value="2_0" id="pr-2_0" data-myid="2_0" class="s-option main-option">Hardware</option>
        <option value="2_11" id="pr-2_11" data-myid="2_11" class="s-option secondary-option">hardware 1</option>
        <option value="2_12" id="pr-2_12" data-myid="2_12" class="s-option secondary-option">hardware 2</option>
        <option value="2_13" id="pr-2_13" data-myid="2_13" class="s-option secondary-option">hardware 3</option>
        <option value="2_14" id="pr-2_14" data-myid="2_14" class="s-option secondary-option">hardware 4</option>
        <option value="2_15" id="pr-2_15" data-myid="2_15" class="s-option secondary-option">hardware 5</option>

        <option value="3_0" id="pr-3_0" data-myid="3_0" class="s-option main-option">Garden</option>
        <option value="3_16" id="pr-3_16" data-myid="3_16" class="s-option secondary-option">garden 1</option>
        <option value="3_17" id="pr-3_17" data-myid="3_17" class="s-option secondary-option">garden 2</option>
</select>
</div>

<script>
    $('#e2').select2({
      templateResult: function (data, container) {
        if (data.element) {
          $(container).addClass($(data.element).attr("class"));
          $(container).attr("id", $(data.element).attr("id"));
          $(container).attr("data-myid", $(data.element).attr("data-myid"));
        }
        return data.text;
      }
    });

    $('#e2').on("select2:select", function(e) {
        
        var selectedVals = $(this).val();

        $(".s-option").each(function(opt) {
            var myid = $(this).attr('data-myid');
            var idInfo = myid.split('_');
            var category = idInfo[0];
            var product = idInfo[1];
            var parentExists = false;

            if (product != 0) {
                parentProduct = category + '_' + '0';
                if ($.inArray(parentProduct, selectedVals) >= 0) {
                    parentExists = true;
                    $('#pr-' + myid).addClass('hddn');
                }
            }

            if ($.inArray(myid, selectedVals) >= 0 && parentExists == true) {
                selectedVals = jQuery.grep(selectedVals, function(value) {
                    return value != myid;
                });
            }

        });
        $('#e2').val(selectedVals);
        $('#e2').trigger('change');
    });

    $('#e2').on("select2:unselect", function(e) {
        var selectedVals = $(this).val();
        $(".s-option").each(function(opt) {
            var myid = $(this).attr('data-myid');

            var idInfo = myid.split('_');
            var category = idInfo[0];
            var product = idInfo[1];

            if (product != 0) {
                parentProduct = category + '_' + '0';
                if ($.inArray(parentProduct, selectedVals) < 0 && $(this).hasClass('hddn')) {
                    $('#pr-' + myid).removeClass('hddn');
                }
            }

        });
    });
</script>