你不能僅僅使用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。
僅供參考,截至CGI v4.04(2014年9月發佈),HTML生成函數不再被維護,並且它們的使用被[官方勸阻](https://metacpan.org/pod/CGI#HTML-生成函數,應該-不再視爲被使用的)。 – ThisSuitIsBlackNot
'key1'指向一個散列引用,但'key2'指向一個數組引用。你的散列真的不一致嗎? – mob