如何从滚动列表中的所选项目生成滚动列表

Question

我试图建立一个表格。有一个由perl CGI生成的滚动列表，这些项目也将由perl CGI提取和处理。但是，我坚持进一步改进这种形式。因为对于某些项目，还有不同的方法来处理它们。我想要的是，当用户点击此滚动列表的项目时，它将生成另一个滚动列表或弹出列表以供更多选择。并且用户可以进一步从该滚动列表或弹出列表中进行选择，并且Perl将提取和处理选择。 我知道这个客户端的工作可能必须通过javascript完成。我知道一些javascript，至少可以理解写在其中的大部分代码，但我没有编写它们来处理这样的事件驱动条件并将结果与​​Perl CGI结合的经验。

有人可以告诉我如何使用javascript执行此操作吗？谢谢。 小宽

例如： 我有Perl CGI的滚动列表：

print scrolling_list(-name=>"animals",-values=>["dog","cat"],-labels=>{dog=>'dog',cat=>'cat'});

#This will generate a scrolling list of "dog" and "cat". What I want is when a user click on dog to make a selection, this scrolling list will generate another scrolling list or pop-up list such as:

print popup_menu(-name=>"action", -values=>['walking','training'],-labels=>{walking=>'walking the dog',training=>'training the dog'});

Answer 1

良好做法规定，必须无需JavaScript即可 。因此，当用户选择某些内容时，我们不会生成新的表单片段，而是提前生成所有表单片段 并使用JavaScript隐藏它们，当用户选择某些内容时，变得不受欢迎。

use CGI qw();
my $c = CGI->new;
print
    $c->header('text/html'),
    $c->start_html(
        -script => [
            { -src => 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', },
            q<
                function hide_all () {
                    jQuery('#dog,#cat').hide();
                }
                jQuery(document).ready(function() {
                    hide_all();
                    jQuery('select[name="animals"]').click( function(e) {
                        hide_all();
                        jQuery('#' + jQuery(e["target"]).val()).show();
                    });
                });
            >,
        ],
    ),
    $c->scrolling_list(
        -name   => 'animals',
        -values => [qw(dog cat)],
        -labels => {dog => 'the dog', cat => 'the cat'},
    ),
    $c->popup_menu(
        -id     => 'dog',
        -name   => 'action1',
        -values => [qw(walking training)],
        -labels => {walking => 'walking the dog', training => 'training the dog'},
    ),
    $c->popup_menu(
        -id     => 'cat',
        -name   => 'action2',
        -values => [qw(playing feeding)],
        -labels => {playing => 'playing with the cat', feeding => 'feeding the cat'},
    ),
;