2015-10-05 61 views
0
% hash = { 
     "key1" : { 
      "value1" : [ 
      "tester1", 
      "tester2" 
      ], 
     "key2" : [ 
     "value2", 
     "tester2", 
     "tester3" 
     ] 
     } 

我已經在數組中鍵的列表會在下拉列表中顯示的,如果我在下拉列表中選擇key1,我只是想key1如何哈希值映射在Perl CGI下拉列表顯示

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

僅供參考,截至CGI v4.04(2014年9月發佈),HTML生成函數不再被維護,並且它們的使用被[官方勸阻](https://metacpan.org/pod/CGI#HTML-生成函數,應該-不再視爲被使用的)。 – ThisSuitIsBlackNot

+0

'key1'指向一個散列引用,但'key2'指向一個數組引用。你的散列真的不一致嗎? – mob

回答

2

你不能僅僅使用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

+0

非常感謝 – bsd