Perl and jQuery to select mutiple elements from dropdown by checking checkboxes

ashraot has asked for the wisdom of the Perl Monks concerning the following question:

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.

Comment on Perl and jQuery to select mutiple elements from dropdown by checking checkboxes Select or Download Code

Replies are listed 'Best First'.
Re: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes by choroba (Cardinal) on Oct 22, 2014 at 09:14 UTC
Crossposted at StackOverflow. It's considered polite to inform about crossposting, so that people not attending both sites don't waste their time hacking a solution to a problem already solved at the other end of the Internets. لսႽ† ᥲᥒ⚪⟊Ⴙᘓᖇ Ꮅᘓᖇ⎱ Ⴙᥲ𝇋ƙᘓᖇ	[reply]
Re: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes by Anonymous Monk on Oct 22, 2014 at 09:48 UTC
I have updated my question. Yes, I see, its an improvement, but it needs more Where is the perl program that focuses on one goal? (remember Re: Need help to improve pagination ) So you want a perl function to print some html stuff and you want that function ( someHtmlStuff ) to print different html stuff based on some value of checkbox1 one and checkbox2, correct? So this is the function you write `someHtmlStuff( \%allColors, \%mainColors, $checkbox1, $checkbox2 ) ;` [download] And these are the possibilities , this is the beginning of your program (like Re: Need help to improve pagination ) `someHtmlStuff( \%allColors, \%mainColors, undef, undef ); someHtmlStuff( \%allColors, \%mainColors, 0, 0 ); someHtmlStuff( \%allColors, \%mainColors, 1, 0 ); someHtmlStuff( \%allColors, \%mainColors, 1, 1 ); someHtmlStuff( \%allColors, \%mainColors, 0, 1 );` [download] This is where you begin, now keep going	[reply] [d/l] [select]
Re^2: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes (multipeColorSelect.pl) by Anonymous Monk on Oct 22, 2014 at 10:02 UTC
Here is the next step, keep improving this program #!/usr/bin/perl -- ## multipeColorSelect.pl ## ## 2014-10-22-02:58:36 ## ## ## ## ## ## ## perltidy -olq -csc -csci=3 -cscl="sub : BEGIN END " -otr -opr -ce +-nibc -i=4 -pt=0 "-nsak=" ## perltidy -olq -csc -csci=10 -cscl="sub : BEGIN END if " -otr -opr +-ce -nibc -i=4 -pt=0 "-nsak=" ## perltidy -olq -csc -csci=10 -cscl="sub : BEGIN END if while " -otr + -opr -ce -nibc -i=4 -pt=0 "-nsak=*" #!/usr/bin/perl -- use strict; use warnings; use Carp::Always; Main( @ARGV ); exit( 0 ); sub Main { my %allColors = ( 1 => 'Red', 2 => 'Yellow', 3 => 'Orange', 4 => 'Blue', 5 => 'Black', 6 => 'Brown', 7 => 'Green', 8 => 'White', ); my %mainColors = ( 1 => 'Red', 2 => 'Yellow', 3 => 'Orange', 4 => 'Blue', ); print multipeColorSelect( \%allColors, \%mainColors, 0, 0 ); print multipeColorSelect( \%allColors, \%mainColors, 1, 0 ); #~ print multipeColorSelect( \%allColors, \%mainColors, 1, 1 ); #~ print multipeColorSelect( \%allColors, \%mainColors, 0, 1 ); } ## end sub Main ### FIRST VERSION, THE STUB #~ sub multipeColorSelect { #~ ## my( $all, $main, $checkMain, $checkReset ### RESET?!?!?!? #~ ## my( $all, $main, $selectMain, , $checkRest #~ my( $all, $main, $selectMain, $selectRest ) = @_; #~ return q{ #~ <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> #~ }; #~ } ## end sub multipeColorSelect ### FIRST IMPROVEMENT , FIRST CONDITION, DEFAULT CONDITION, no checkbo +xes selected sub multipeColorSelect { my( $all, $main, $selectMain, $selectRest ) = @_; if( not $selectMain and not $selectRest ) { return q{ <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> }; } else { die "todo"; } } ## end sub multipeColorSelect __END__ [download] This is what happens when I run it (looks good so far) $ perl multipeColorSelect.pl <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> todo at multipeColorSelect.pl line 82. main::multipeColorSelect('HASH(0x99bbf4)', 'HASH(0xa1019c)', 1 +, 0) called at multipeColorSelect.pl line 41 main::Main() called at multipeColorSelect.pl line 19 [download] Next step, return some different static html for different selecdtMain and selectRest value combinations	[reply] [d/l] [select]
Re^3: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes (multipeColorSelect.pl) by Anonymous Monk on Oct 22, 2014 at 11:56 UTC
I dont want perl function to print some html stuff. I want jQuery as I showed in my code. But, when checkbox is checked, how do we call values from hash?	[reply]
Re^4: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes (multipeColorSelect.pl) by Corion (Patriarch) on Oct 22, 2014 at 11:58 UTC
Re^4: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes (multipeColorSelect.pl) by perlron (Pilgrim) on Oct 22, 2014 at 13:04 UTC
Re^3: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes (multipeColorSelect.pl) by Anonymous Monk on Oct 22, 2014 at 12:11 UTC
And i dont want to use this. This was my example. `<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] Instead I want to call values from hash from dropdown when checkbox is checked.	[reply] [d/l]
Re^4: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes (multipeColorSelect.pl) by Anonymous Monk on Oct 22, 2014 at 15:27 UTC
Re^5: Perl and jQuery to select mutiple elements from dropdown by checking checkboxes by Anonymous Monk on Oct 23, 2014 at 00:11 UTC
Re: jQuery to select mutiple elements from dropdown by checking checkboxes (subroutine/function) by Anonymous Monk on Oct 21, 2014 at 20:48 UTC
..... So write a subroutine/function to do that?	[reply]
Re^2: jQuery to select mutiple elements from dropdown by checking checkboxes (subroutine/function) by Anonymous Monk on Oct 22, 2014 at 05:59 UTC
Thats what I dont have any idea. Thats why I am asking help. And I could do only till here. My question mainly is to how to use select $main_colors on select of MainColors checkbox?	[reply]
Re^3: jQuery to select mutiple elements from dropdown by checking checkboxes (diagram) by Anonymous Monk on Oct 22, 2014 at 07:03 UTC
Thats what I dont have any idea. Thats why I am asking help. And I could do only till here. Well, you start with a picture, a few circles each with a goal that you would like to achieve, ... after that you write a small program will try to achieve these goals and that checks that each goal is met ... the part that actually achieves the goals doesn't have to be written yet But it has to be a program, it has to compile, it has to be run, it has to be small and focus on only one goal at a time, and it has to know what the outcome should be ... it doesn't have to work correctly, I can help with that, but the purpose and goals should be clear, and surrounded by adequate whitespace (easy to read format) It looks like you did read How do I post a question effectively? but the your question is kinda big. If you would post a runnable program like Re: Need help to improve pagination I can probably help you. You'll notice sub pageNumbers {} is a stub, it just returns the correct result for the given test data, it has yet to be written -- this is a good beginning at solving your problem. My question mainly is to how to use select $main_colors on select of MainColors checkbox? I'm sorry but I cannot understand the question, too many corners are fuzzy, there is too much information, and it isn't presented in a very easy to understand way At this moment its not clear what problem you're trying to solve :) generating some html in the form that you want? or generating some javascript in the form that you want? or how to arrange for communication between javascript and your program? or writing javascript that does something? or all of the above at the same time (too much questions)? You need a good diagram, and you need to make the questions small enough to answer :) Hope this helps	[reply]
Re^4: jQuery to select mutiple elements from dropdown by checking checkboxes (diagram) by Anonymous Monk on Oct 22, 2014 at 07:14 UTC
Re^4: jQuery to select mutiple elements from dropdown by checking checkboxes (diagram) by ashraot (Initiate) on Oct 22, 2014 at 09:12 UTC
Re^3: jQuery to select mutiple elements from dropdown by checking checkboxes (subroutine/function) by perlron (Pilgrim) on Oct 22, 2014 at 06:36 UTC
you will get more help from the monks if you simplify your example and strip out frameworks/data not relevant to the perl / server side code. please bear in mind that disabling controls like checkbox/radiobtn in a html form causes the element&its value to not be set in the POST data. w3 source	[reply]
Re^4: jQuery to select mutiple elements from dropdown by checking checkboxes (subroutine/function) by Anonymous Monk on Oct 22, 2014 at 06:41 UTC
Re^5: jQuery to select mutiple elements from dropdown by checking checkboxes by Anonymous Monk on Oct 22, 2014 at 07:09 UTC