2012-08-07 104 views
1

我有兩個選擇框:一個是國家,另一個是城市。 當用戶選擇一個國家時,該國的相應城市應該從數據庫中填入「城市」。從另一個選擇框填充選擇框並使用數據庫連接

我是新來的jquery和JavaScript,我不知道如何實現這一點。如果有人給我一個示例代碼來執行這個功能,將不勝感激。我不知道,因爲我是腳本語言的新手,所以我幾乎陷入困境。

我在我的一個窗體中用python實現的django框架中使用它。

預先感謝您

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div { color:red; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
    <select name="country" id="country"> 
    <option value = "india">india</option> 
    <option value = "USA">USA</option> 
    <option value = "UK">UK</option> 
    <option value = "China">China</option> 
    <option value = "Sweden">Sweden</option> 
    <option value = "Germany">Germany</option> 
    </select> 

    <select name="cities" id="cities"> 
    <option value = ""></option> 
    </select> 
    <div></div> 

</body> 
</html> 
+0

我試圖做一些基本的功能,我能夠得到所選元素選擇框,「國家」的價值,但我不知道下一步該做什麼。 $('#國)改變(函數() \t { \t \t VAR值= $(本).attr( '值'); \t \t警報(值); \t}); – sankar 2012-08-07 08:53:30

+0

你們每個國家都有很多城市嗎?我所要問的原因是可能需要緩存服務器上的城市列表並將其返回到視圖,並使用Javascript彈出選擇框,而不是始終打開數據庫。 – Mikael 2012-08-07 08:54:14

+0

@Mikael:實際上我需要使用數據庫,因爲還有另一個複雜的場景,我將使用上述邏輯來實現。在這種情況下,還會有兩個列表框,日期和時間,當您選擇一個日期時,購買時間應該在時間選擇框中動態顯示,然後使用上述兩個值我將執行額外的操作,而我不應刷新頁面或提交表單。 – sankar 2012-08-07 09:00:34

回答

0

試試這個:

在模板

$('#country').change(function() { 
    var value = $(this).attr('value'); 
    var request = $.ajax({ 
     url: "/getcities/", 
     type: "GET", 
     data: {country : value}, 
     dataType: "json", 

     success: function(data) { 
     //Popluate combo here by unpacking the json 
     } 
    }); 


}); 

在你看來:

def getcities(request) 
    if request.method == "GET": 
     country = request.GET["country"] 
     cities = Cities.objects.filter(country=country) 
     results = [{'city': str(city.name), 'id':city.id} for city in cities] 
     json = simplejson.dumps(results) 
     return HttpResponse(json, mimetype='application/json') 

您必須將網址映射/ getcities /給你的看法在urls.py中。

+0

嗨,我想在我的代碼中實現這個邏輯,並感謝你我理解了邏輯。我通過url調用視圖有點麻煩。換句話說,我已經在urls.py中定義了它,並且還實現了該視圖,但視圖沒有被調用。我不明白它沒有被稱爲的原因 – sankar 2012-08-07 11:31:44

+0

您正在使用哪個版本的Django?也請嘗試更改爲GET而不是POST。我已更新我的答案以反映 – Mikael 2012-08-07 11:38:24

+0

使用Firebug查看代碼調用的路徑。它可能有些問題。 – Mikael 2012-08-07 11:49:49

相關問題