HTMLのFORMのSELECTの内容を動的に変化させるサンプル

0

     

     

    HTMLのFORMのSELECTの内容を動的に変化させるサンプル

     A.html
          1 <script type = "text/javascript">
          2 <!--
          3 function Select2Set()
          4 {
          5     var Select1 = document.forms.InputForm.Select1; //変数Select1を宣言
          6     var Select2 = document.forms.InputForm.Select2; //変数Select2を宣言
          7     Select2.options.length = 0; // 初期化
          8     if (Select1.options[Select1.selectedIndex].value == "ハード")
          9     {
         10         Select2.options[0] = new Option("CPU");
         11         Select2.options[1] = new Option("メモリ");
         12         Select2.options[2] = new Option("ディスク");
         13     }
         14     else if (Select1.options[Select1.selectedIndex].value == "アプリ")
         15     {
         16         Select2.options[0] = new Option("Excel");
         17         Select2.options[1] = new Option("Word");
         18         Select2.options[2] = new Option("PowerPoint");
         19         Select2.options[3] = new Option("Access");
         20     }
         21     else if (Select1.options[Select1.selectedIndex].value == "ミドル")
         22         {
         23             Select2.options[0] = new Option("Oracle");
         24             Select2.options[1] = new Option("WebSphere");
         25         }
         26     }
         27 //-->
         28 </script>
         29
         30 <body bgcolor onLoad="Select2Set()">
         31 <form name="InputForm" method="post" action="print.cgi">
         32     <!-- SELECT1 -->
         33     <select name = "Select1" onChange="Select2Set()">
         34         <option value = "ハード">ハード</option>
         35         <option value = "アプリ">アプリ</option>
         36         <option value = "ミドル">ミドル</option>
         37     </select>
         38     <!-- Select2 この内容が動的に変化-->
         39     <select name = "Select2">
         40     </select>
         41     <input name="btn" type="submit" value="submit_button">
         42 </form>
         43 </body>

     print.cgi
          1 #!/usr/bin/perl
          2
          3 use strict;
          4 #use warnings;
          5 use CGI;
          6 use DBI;
          7
          8 print "Content-type: text/plain¥n¥n";
          9
         10 #
         11 # POST / GET パラメータを取得
         12 #
         13 my $q = new CGI;
         14 my $Select1;
         15 my $Select2;
         16
         17 $Select1 = $q->param('Select1');
         18 $Select2 = $q->param('Select2');
         19
         20 print "Select1 = $Select1¥n";
         21 print "Select2 = $Select2¥n";
         22
         23 print "end¥n";
         24
         25

     

     


    スポンサーサイト

    0
      • 2019.10.22 Tuesday
      • -
      • 13:36
      • -
      • -
      • by スポンサードリンク


      PR

      calendar

      S M T W T F S
           12
      3456789
      10111213141516
      17181920212223
      24252627282930
      << November 2019 >>

      selected entries

      categories

      archives

      recent comment

      recent trackback

      profile

      search this site.

      others

      mobile

      qrcode

      powered

      無料ブログ作成サービス JUGEM