如何映射哈希值以显示在 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。
% 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。