Показать и скрыть динамически поля в Django форме

Question

У меня есть форма в 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 элемент в будет отображаться, а list2 - скрыть, если тип равен 1, и наоборот, в случае, если тип равен 2. Я хочу, чтобы они были скрыты и отображались динамически без перезагрузки страницы или любого взаимодействия с сервером.

Я считаю, что Javascript может быть полезен здесь, но я этого не знаю.

Answer 1

Попробуйте это ...

<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> 

Answer 2

Это адаптация решения 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 был принят в контексте шаблона с именем «формы»:

<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>