javascript - 如何从滚动列表中的选定项目生成滚动列表

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