2010-11-11 3 views
1

Я создаю веб-приложение Google App Engine, написанное на Python, и я хотел бы создать раскрывающееся окно, которое отображает различные значения, соответствующие страницам книги, которую пользователь может выбрать из. Я хотел бы действие выпадающего списка, чтобы быть, чтобы направить пользователя на страницу, которая соответствует этой ссылке:Выпадающий стол HTML с Google App Engine

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

«bookpage» объект передается в HTML

Спасибо!

Дэвид

ответ

1

Используйте Jump Menu. Here - довольно простая реализация.

В основном вы просто добавить немного JavaScript, и вместо того, чтобы писать тег, вы будете писать опцию:

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

Спасибо! Кажется, это здорово! – David

0

Что о <option value='/viewpage/{{bookpage.key.id}}'>{{bookpage.page}}</option>?

Надеюсь, это не глупый ответ.

0

Я не знаком с движком google-app, но, похоже, следующий javascript делает то, что вы хотите. 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 тега.