-2

フォームを作ってみました。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'});
4

1 に答える 1

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'},
    ),
;
于 2012-04-23T14:22:20.050 に答える