2012-04-13 24 views
3

Djangoの親フィールドの選択に基づいてフィールドを条件付きで非表示または表示する方法について質問があります。Djangoのドロップダウンメニューからの選択に基づいてフォームフィールドを表示および非表示にする方法

**アップデート:JavaScriptで関数を定義することでこの機能を実装できます。これは単純なHTMLコードでテストされています。しかし、私の入力テーブルはDjangoによって作成されているので、誰でも私にDjangoのonchangeでこの関数を呼び出す方法を教えてもらえますか? **

最終更新日:これを行うにはjQueryを使用する方が簡単だと思います。 jQuery: Conditional show an element based on drop down box selection

Javascriptを: 説明: 1. 1が親ボックスから「空中スプレー」を選択した場合は任意の選択を行う前に、1のみドロップダウンメニュー「応募方法」 2を参照することができ、その後、新しいです1が親ボックスから「アーススプレー」を選択した場合、ドロップダウンメニュー「空中サイズディストは」 は、その後、別のドロップダウンリスト「アーススプレータイプ」とは、入力に

<script type="text/javascript"> 
function display(obj,id1,id2) { 
txt = obj.options[obj.selectedIndex].value; 
document.getElementById(id1).style.display = 'none'; 
document.getElementById(id2).style.display = 'none'; 

if (txt.match(id1)) {document.getElementById(id1).style.display = 'block';} 
if (txt.match(id2)) {document.getElementById(id2).style.display = 'block';} 
</script> 

<table> 
<tbody align="center"> 
<tr><th>Application method:</th> 
<td><select onchange="display(this,'A','B')" name="method" id="id_method"> 
<option value="">Pick a method</option> 
<option value="A">Aerial Spray</option> 
<option value="B">Ground Spray</option> 
</select></td></tr></tbody> 

<tbody id="A" align="center" style="display: none;"> 
<tr><th><label for="id_aerial_size_dist">Aerial Size Dist:</label></th><td><select select name="aerial_size_dist" id="id_aerial_size_dist"> 
<option value="" selected="selected">Pick first</option> 
<option value="A1">Very Fine to Fine</option> 
<option value="A2">Fine to Medium (EFED Default)</option> 
</select></td></tr> 
</tr> 
</tbody> 

<tbody id="B" align="center" style="display: none;"> 
<tr><th><label for="id_spray_type">Ground spray type:</label></th><td><select name="spray_type" id="id_spray_type"> 
<option value="B1" selected="selected">Low Boom Ground Sprayer (20 Inches or Less)</option> 
<option value="B2">High Boom Ground Sprayer (20 to 50 Inches: EFED Default)</option> 
</select></td></tr></tbody></table> 

Djangoのコードは動作しません必要があります3。今。定義されたすべての関数 'display'についての助けが必要です。

updat、mark_safeを追加した後、コードが動作します。

class GENEECInp(forms.Form): 
    application_method = forms.ChoiceField(required=True, choices=applicationmethod_CHOICES, initial='Aerial Spray', 
              widget=forms.Select(attrs={'onchange':mark_safe("display(this,'A','B','C','D');")}) 
+0

JavaScriptのものです。 jQueryをご覧ください – icn

+0

@icn、私はプログラミングの初心者です...あなたは私にこのようなアプリケーションの例を教えてもらえますか?ありがとうございました! –

答えて

0

あなたは適切なフィールドを非表示にしたり再表示するにはjavascriptのいくつかのカスタムが必要になるだろう。このウィジェットにはJavaScriptがありますか?

+0

私が得た唯一のjavascriptは 'onchange'のものだと思います。私はDjangoメディアクラスを見ますか? –

+0

私はそれを正しく読まなかった。あなたはonchangeを設定することによってあなたがやっていることをすることができますが、私はそれが有効なjavascriptだとは思わない。たとえば、実際にレンダリングされたHTMLでは、サイズフィールドはおそらくid_sizeとして表示されます。私はメディアクラスを使用して別々のjavascriptファイルとしてジャバスクリプトを作成しました。あなたはあなたのやり方をすることができますが、JavaScriptが正しいことを確認してください。 – dragonx

+0

私はJavaScriptを使って関数を定義することでこの機能を実現できますが、この関数をDjango形式で呼び出す方法は分かりますか?更新された投稿をご覧ください。 –

関連する問題