Question

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

我已经在下拉列表中显示了数组中的键列表，如果我在下拉列表中选择key1，我只想要key1值

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

Answer 1

您不能仅使用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生成方法大概十五年了。请改用an alternative approach。

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

1 个答案: