I have a multiselect dropdown which has 8 colors in a hash %all_colors:

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

I have put it in a dropdown like this:

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

    <div><% $color_selector %></div>
[download]

Now I want to add 2 new checkboxes.

    <div>
        <input type="checkbox" name="maincolors" value="1" class="inpu
+tCheckbox" /> Main Colors
        <input type="checkbox" name="resetofcolors" value="1" class="i
+nputCheckbox" /> Rest of the Colors
    </div>
[download]

And in Perl, I added one more constant to select checkbox1 and use constant in perl to call the checkbox. I dont know how to use this to select these 4 values in dropdown when "Main Colors" checkbox is checked. And Rest of colors should be checked when clicked on "Rest of the Colors" checkbox.

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

I have written a code which uses plain HTML but I actually want to call the colors from Perl hash

<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>
[download]

But I dont want this to use plain HTML, instead I want : 1) If I select checkbox1 "Main Colors", it should automatically select Red, Orange, Green, White from the dropdown ie., it should call values from hash 2) If I select checkbox2 "Rest of the Colors", it should automatically select first 4 from the dropdown ie., it should call values from hash Please help. Also, There are some conditions which is not working in jQuery as expected. I need help for jQuery also. 1) If any 1 color is randomly selected from the dropdown instead of checking checkbox, then I want to disable the checkbox which is not related to that group. Ex: If Red is selected from dropdown directly, "Rest of the Colors" checkbox should be disabled. If I deselect Red and select Brown directly, then "Rest of the colors" checkbox should be reenabled and "Main Colors" checkbox should be disabled. 2) One set of four elements need not be disabled when others are selected. Both can be selected simutlaneously so that all are selected by checking both checkboxes. Users are allowed to select and deselect members of the group of four which is already working in jQuery code below. 3) If "White" and "Yellow" both are selected at the same time from dropdown, then both checkboxes should be enabled.

$('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);
        }
    }
});
[download]

Please help.

---

---

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

• How do I compose an effective node title?
• How do I post a question effectively?
• Markup in the Monastery

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		&
	<		&lt;
	>		&gt;
	[		&#91;
	]		&#93;

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.