スクロールリストから選択した項目からスクロールリストを生成する方法

Question

フォームを作成しようとしました。 perl CGIによって生成されたスクロールリストがあり、そのアイテムはperl CGIによっても抽出され、処理されます。しかし、私はこのフォームをさらに改良して立ち往生しています。いくつかのアイテムについては、それらを処理する方法もいくつかあります。私が望むのは、ユーザーがこのスクロール・リストの項目をクリックすると、スクロール・リストまたはポップアップ・リストが生成され、選択肢が増えます。ユーザーはこのスクロールリストまたはポップアップリストからさらに選択することができ、その選択はPerlによって抽出され、処理されます。 私はこのクライアント側の作業がjavascriptによって行われなければならないかもしれないことを知っています。私はいくつかのJavaScriptを知っていますが、少なくともそれに書かれているコードのほとんどを理解することができますが、そのようなイベント駆動型の条件を処理し、その結果をPerl CGIと組み合わせることはできません。

誰かが私にjavascriptを使ってこれを行う方法を教えてもらえますか？ありがとうございました。例については Xiaokuan

：は JavaScriptをなしアクセスできる必要があります形成

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

グッドプラクティスの規定： 私はPerlのCGIによってスクロールリストを持っています。したがって、ユーザーが何かを選択したときに新しいフォームフラグメントを生成する代わりに、すべてフォームフラグメントを事前に生成して、を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'}, 
    ), 
;