2009-08-26 10 views
8

私はDjangoアプリを開発したいと考えていました。私が望む機能の1つに、動的なドロップダウンリストがあります。具体的には、車種とモデル...特定のmakeはモデルリストを更新してモデルを作成します。これはjavascriptやjQueryで可能です(これは誰でも答えがあれば私の最良の選択です)が、どうやって行くのかわかりませんそれについて。データベースからのDjango Dynamicドロップダウンリスト

また、メイク、モデル、年、シリーズが共通で、カラー、送信などの他の属性を変数にして、make、model、year、およびseriesのみを入力する必要があるようにしたい新しい車両。どんなアイデアも高く評価されます。

答えて

9

3つの入力値が共通、メイク、モデル、年となります。サーバーに与えられると、詳細を含むオブジェクトが呼び出しページに返されます。そのページは、JavaScriptを使用してオブジェクトの詳細を解析し、UIを更新してユーザーに表示します。

Django側からは、3つの入力を受け取り、出力を返す機能が必要です。クライアント側からは、3つの入力をサーバーに渡し、サーバーの応答を適切に解析する機能が必要です。 Piston -

それはむしろ簡単に上記の「API」を追加することができDjangoのためのREST APIフレームワークがあります。 Pistonを使用すると、そのリソースのURLを作成し、それを処理するハンドラを追加するだけで済みます。これは、単にURLのwww.yoursite.com/vehicle/[make]/を設定

urls.py: 
vehicle_details = Resource(handler=VehicleDetails) 
url(r'^vehicle/(?<make>.*)/(?<model>.*)/(?<year\d{2,4}/(?P<emitter_format>[a-z]{1,4}), vehicle_details, name='vehicle_details'), 

handler.py: 
class VehicleDetails(BaseHandler): 
    methods_allowed = ('GET',) 
    model = Vehicles #whatever your Django vehicle model is 

    def read(self, request, *args, **kwargs): 
     # code to query the DB and select the options 
     # self.model.objects.filter()...    
     # Build a custom object or something to return 

     return custom_object 

を(あなたはまだピストンのドキュメントを脱脂する必要がありますが、これはあなたにそれがどのように見えるかのアイデアを与える必要があります) [model]/[year]/json JSONでカスタムデータオブジェクトを返して、jqueryで解析します。

jqueryを使用してイベント(バインド)を設定すると、3つのドロップダウンに値が選択されたときに、api URLに対して$ .get()が実行されます。この結果が返されると、Jquery JSONパーサに渡され、カスタムオブジェクトがjavascriptオブジェクトとして渡されます。そのオブジェクトを使用して、より多くのドロップダウンメニューを設定することができます。

(コピーして貼り付けることを意図していないので、ビッグ警告、私は、以下のオフ私の頭の上を書いた。それはちょうど一般的なアイデアのためです。)

<script type="text/javascript"> 

    // On document load 
    $(function() { 
     $('#dropdown_make').bind('change', checkForValues()); 
     $('#dropdown_model').bind('change', checkForValues()); 
     $('#dropdown_year').bind('change', checkForValues()); 
    }); 

    function checkForValues() { 
     if ($('#dropdown_make').val() && $('#dropdown_model').val() && $('#dropdown_year').val()) 
      updateOptions();   
    } 

    function updateOptions() { 
     url = '/vehicle/'; 
     url += $('#dropdown_make').val() + '/'; 
     url += $('#dropdown_model').val() + '/'; 
     url += $('#dropdown_year').val() + '/'; 
     url += 'json/'; 
     $.get(url, function(){ 
      // Custom data object will be returned here 
     }) 
    } 
</script> 

0

これはすごい:Dynamic Filtered Drop-Down Choice Fields With Django

質問:

「ここでは、状況です:私は車でデータベースを作成し、モデル持っているユーザーは、メイクを選択すると、私が欲しいです。そのモデルに関連付けられているモデルだけでモデルのドロップダウンを更新することができます。したがって、Ajaxを使用してデータを入力したいと考えています。

あなたは同じ男ではありませんか? :)

+0

ありません同じ男...同じ問題を解決しようとしているだけです...リンクに感謝します。それは私のための良いスタートのように見えます。 –

+2

私は男です、そしてこれは大変です:) – Dustin

関連する問題