如何映射哈希值以显示在 perl cgi 下拉列表中

how to map the hash values to display in perl cgi dropdown

    % hash = {
       "key1" : {
          "value1" : [
          "tester1",
          "tester2"
          ],
       "key2" : [
         "value2",
         "tester2",
         "tester3"
         ]
        }

我已经有一个数组中的键列表将显示在下拉列表中,如果我 select key1 在下拉列表中,我只想要 key1

  print $q->popup_menu(-name=>'name',-values=>\@LISTOFKEYS);

仅使用 Perl 和 CGI​​ 无法做到这一点。如果您想动态更改下拉列表的内容,那么您也需要使用 Javascript。

鉴于列表中的选项数量相对较少,最简单的方法是将数据结构复制到 Javascript 对象中,并使用它来驱动下拉菜单的内容(在更多复杂的情况,你可能会使用 Ajax 来获取每次下拉内容变化时的新数据。

这是一个简单的 HTML 页面,演示了其工作原理。你的问题现在变成了在你的 CGI 程序中生成类似这个文件的东西。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
var orgs = {
  org1 : {
    "repo1" : [
      "testuser1",
      "testuser2"
    ],
    "repo2" : [
      "testuser1",
      "testuser2",
      "testuser3"
    ]
  }, 
  org2 : {
    "repo3" : [
      "testuser1",
      "testuser2"
    ],
    "repo4" : [
      "testuser1",
      "testuser2",
      "testuser3",
      "testuser3"
    ]
  }
};

$(document).ready(function() {
  $('#level1').find('option').remove();
  $.each( orgs, function( key, value ) {
    $('#level1').append('<option value="' + key + '">' + key + '</option>');
  });

  $('#level1').change(function() {
    var newOrg = $('#level1').val();
    $('#level2').find('option').remove();
    $.each(orgs[newOrg], function( key, value ) {
      $('#level2').append('<option value="' + key + '">' + key + '</option>');
    });
  });

  $('#level1').change();
});

    </script>
  </head>
  <body>
    <h1>Drop-down Test</h1>
    <select id="level1"></select>
    <select id="level2"></select>
  </body>
</html>

(我的 jQuery 知识非常初级 - 很可能有改进我的代码的方法)

在生产系统中,您很可能能够将大部分 Javascript 移动到一个单独的(静态)文件中,只需留下每次程序生成的大 orgs 对象是 运行.

我只想重申,我们已经了解 CGI 的 HTML 生成方法在大约 15 年的时间里是一个糟糕的想法。请改用an alternative approach