带有 Google App Engine 的 HTML 下拉框答案

【问题标题】：HTML drop-down box with Google App Engine带有 Google App Engine 的 HTML 下拉框
【发布时间】：2010-11-11 23:49:30
【问题描述】：

我正在创建一个用 Python 编写的 Google App Engine Web 应用程序，我想创建一个下拉框，显示与用户可以从中选择的书籍页面相对应的不同值。我希望下拉框的操作是将用户引导到与此链接对应的页面：

<a href='/viewpage/{{bookpage.key}}'>{{ bookpage.page }} </a>

将“bookpage”实体传递给html

谢谢！

大卫

【问题讨论】：

标签： python html google-app-engine

【解决方案1】：

使用Jump Menu。 Here 是一个非常直接的实现。

基本上你只需要添加一点 JavaScript，而不是写一个 a 标签，你会写一个选项：

<option value='/viewpage/{{bookpage.key}}'>{{ bookpage.page }} </option>

【讨论】：

【解决方案2】：

<option value='/viewpage/{{bookpage.key.id}}'>{{bookpage.page}}</option> 呢？

我希望这不是一个愚蠢的答案。

【讨论】：

【解决方案3】：

我不熟悉 google-app-engine 但是，以下 javascript 似乎可以满足您的需求。 python 可以在服务器端生成数组变量，然后其他一切都会正常工作。我包含了硬编码的数组，所以你可以看到发生了什么，但你可以用 python 代码替换数组（假设 bookpage 是某种字典）：

i = 0
for bp in bookpage.keys():
    print("mysites["+str(i)+"] = "+ bookpage[bp])+";"
    print("sitenames["+str(i)+"] = "+sitenames[bp])+";"
    i+=1

<html>
<body>
<script type="text/javascript">
var mysites= new Array();
    mysites[0] = "http://www.google.com";   //Generate this line with python
    mysites[1] = "http://www.bing.com";     //Generate this line with python
    mysites[2] = "http://www.yahoo.com"; //Generate this line with python
var sitenames = new Array();
    sitenames[0] = "Google";       //Generate this line with python
    sitenames[1] = "Bing";           //Generate this line with python
    sitenames[2] = "Yahoo";       //Generate this line with python
function changeLink(){
    var index = document.getElementById("theselect").selectedIndex
document.getElementById("thelink").innerHTML=index;
    var newlink = mysites[index];
    var newstring = sitenames[index];
    document.getElementById("thelink").href=newlink;
    document.getElementById("thelink").innerHTML=sitenames[index];
}
</script>
<select id="theselect" onclick="changeLink()">
  <option>Google</option>
  <option>Bing</option>
  <option>Yahoo</option>
</select>
 <br />
<a id="thelink" href="http://www.google.com" > Google </a>
</body>
</html>

点击选项框调用changeLink()函数，然后改变链接和标签的内部html。

【讨论】：