my %all_colors = (
        1 => 'Red',
        2 => 'Yellow',
        3 => 'Orange',
        4 => 'Blue',
        5 => 'Black',
        6 => 'Brown',
        7 => 'Green',
        8 => 'White',
    );

##</code><code>##

    
    my $color_selector = '<select name="all_colors">';
    
    foreach my $color (sort {$all_colors{$a} cmp $all_colors {$b}} keys %all_colors ) {
        $color_selector .= qq~<option value="$color">$all_colors{$color}</option>~;
    }
    $color_selector .= '</select>';

    <div><% $color_selector %></div>

##</code><code>##

    <div>
        <input type="checkbox" name="maincolors" value="1" class="inputCheckbox" /> Main Colors
        <input type="checkbox" name="resetofcolors" value="1" class="inputCheckbox" /> Rest of the Colors
    </div>

##</code><code>##

    use constant MAIN_COLORS => {
        1 => 'Red',
        2 => 'Orange',
        3 => 'Green',
        4 => 'White',
    };
    
    my $main_colors = MAIN_COLORS;

##</code><code>##

<select id="multipeColorSelect" multiple size="8">
    <option value="Red" class="maincolor">Red</option>
    <option value="Orange" class="maincolor">Orange</option>
    <option value="Green" class="maincolor">Green</option>
    <option value="White" class="maincolor">White</option>
    <option value="Yellow">Yellow</option>
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="Brown">Brown</option>
</select>

##</code><code>##

$('input[name="colorcheckbox"]').click(function () {

    var colorsToSelect = $(this).val();

    if($(this).prop('checked') == true) {
        if(colorsToSelect == 'maincolors') {
            $('#multipeColorSelect option').slice(0,4).prop('selected', true);
        } else if (colorsToSelect == 'restofcolors') {
            $('#multipeColorSelect option').slice(4,8).prop('selected', true);
        } 
    } else {
        if(colorsToSelect == 'maincolors') {
            $('#multipeColorSelect option').slice(0,4).prop('selected', false);
        } else if (colorsToSelect == 'restofcolors') {
            $('#multipeColorSelect option').slice(4,8).prop('selected', false);
        }
    }
});