5

Djangoにフォームがあります：

views.py：

class SearchForm(forms.Form):
    type = forms.ChoiceField(choices = ...)
    list1 = forms.ModelMultipleChoiceField(...)
    list2 = forms.ModelMultipleChoiceField(...)

home.htm：

<td valign='top'>{{ form.type }}</td>
<td valign='top'>{{ form.list1 }}</td>
<td valign='top'>{{ form.list2 }}</td>
<td valign='top'><input type="submit" value="Find" /></td>

タイプが1の場合はlist1要素を表示し、タイプ2の場合はlist2を非表示にし、タイプが2の場合は非表示にします。ページをリロードしたりサーバーとやり取りしたりせずに動的に非表示にして表示します。

ここではJavascriptが役立つと思いますが、わかりません。

4

2 に答える 2

5

これは、Andrew の Javascript ソリューションを適応させたもので、Django フォームを通常どおりに使用しています。

Django / Python のフォーム:

class SearchForm(forms.Form):
    type = forms.ChoiceField(choices = ((1, 'One'), (2, 'Two')))

    # Use any form fields you need, CharField for simplicity reasons
    list1 = forms.CharField()
    list2 = forms.CharField()

SearchForm'form' という名前のテンプレート コンテキストに渡されたインスタンスを想定したテンプレート:

<script>
function Hide() {
    if(document.getElementById('id_type').options[document.getElementById('id_type').selectedIndex].value == "1") {
         document.getElementById('id_list1').style.display = 'none';
         document.getElementById('id_list2').style.display = '';
    } else {
         document.getElementById('id_list1').style.display = '';
         document.getElementById('id_list2').style.display = 'none';
    }
}

window.onload = function() {
    document.getElementById('id_type').onchange = Hide;
};
</script>

<div>
    {{ form.type.label_tag }}{{ form.type }}
</div>
<div>
    {{ form.list1.label_tag }}{{ form.list1 }}
</div>
<div>
    {{ form.list2.label_tag }}{{ form.list2 }}
</div>
于 2013-02-28T23:01:00.817 に答える
4

これを試して...

<script>function Hide()
{
    if(document.getElementById('mainselect').options[document.getElementById('mainselect').selectedIndex].value == "1")
    {
         document.getElementById('a').style.display = 'none';
         document.getElementById('b').style.display = '';
    }else
    {
         document.getElementById('a').style.display = '';
         document.getElementById('b').style.display = 'none'
    }
}
</script>
<td valign='top'><select id="mainselect" onchange="Hide()"><option value="1">1</option><option value="2">2</option></select></td>
<td valign='top' id='a'>{{ form.list1 }}</td>
<td valign='top' id='b'>{{ form.list2 }}</td>
<td valign='top'><input type="submit" value="Find" /></td>
于 2013-02-28T13:33:42.890 に答える