Expand|Select|Wrap|Line Numbers
- my %all_colors = (
- 1 => 'Red',
- 2 => 'Yellow',
- 3 => 'Orange',
- 4 => 'Blue',
- 5 => 'Black',
- 6 => 'Brown',
- 7 => 'Green',
- 8 => 'White',
- );
Expand|Select|Wrap|Line Numbers
- 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>
Expand|Select|Wrap|Line Numbers
- <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>
Expand|Select|Wrap|Line Numbers
- use constant MAIN_COLORS => {
- 1 => 'Red',
- 2 => 'Orange',
- 3 => 'Green',
- 4 => 'White',
- };
- my $main_colors = MAIN_COLORS;
Expand|Select|Wrap|Line Numbers
- <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>
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 the rest of the colors 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.
Expand|Select|Wrap|Line Numbers
- $('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);
- }
- }
- });