Question

我有一个多选下拉列表，其中哈希％all_colors中有8种颜色：

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

我把它放在这样的下拉列表中：

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>

现在我要添加2个新复选框。

<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>

在Perl中，我添加了一个常量来选择checkbox1并在perl中使用常量来调用复选框。当＆＃34;主要颜色＆＃34;我不知道如何使用它来在下拉列表中选择这4个值。复选框已选中。当点击＆＃34;剩下的颜色＆＃34;时，应检查其余的颜色。复选框。

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

my $main_colors = MAIN_COLORS;

我编写了一个使用纯HTML的代码，但实际上我想从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>

但我不希望这使用简单的HTML，而是我想要：
1）如果我选择checkbox1＆＃34; Main Colors＆＃34;，它应该从下拉列表中自动选择红色，橙色，绿色，白色，即。它应该从哈希值调用值。
2）如果我选择checkbox2＆＃34;其余颜色＆＃34;，它应该自动从下拉列表中选择其余颜色，即。它应该从哈希值中调用其余的值。

请帮忙。

此外，有一些条件在jQuery中没有按预期工作。我也需要jQuery的帮助。

1）如果从下拉列表中随机选择任何1种颜色而不是选中复选框，则我要禁用与该组无关的复选框。
例如：如果直接从下拉列表中选择红色，＆＃34;其他颜色＆＃34;复选框应该被禁用。如果我取消选择红色并直接选择布朗，那么＆＃34;其余的颜色＆＃34; 复选框应该重新启用和＆＃34;主要颜色＆＃34;复选框应禁用。
2）选择其他元素时，不需要禁用一组四个元素。两者都可以同时选择，以便通过选中两个复选框来选择所有选项。允许用户选择和取消选择已在下面的jQuery代码中工作的四人组成员 3）如果＆＃34;怀特＆＃34;和＆＃34;黄＆＃34;从下拉列表中同时选择两者，然后应启用两个复选框。

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

请帮忙。

Perl和jQuery从多选下拉列表中选择元素

0 个答案: