javascript - 如何使用 JavaScript、Jquery 等隐藏 Django 表单字段

Question

我想动态隐藏表单字段。用户应该能够选择组件类型，可以是 VALVE，在这种情况下，用户应该指定 Kv 值，并且应该隐藏 DI 和长度字段。或者用户可以选择 PIPE 组件类型，在这种情况下，用户应指定管道的内径 (DI) 和长度，并且应隐藏 k_v 字段。

模型定义如下:

class Component(models.Model):

COMPONENT_TYPE_CHOICES = (
    (1, 'k_v'),
    (2, 'pipe')
)

circuit                     = models.ForeignKey('circuit.Circuit', related_name='components', on_delete=models.CASCADE)
component_type              = models.IntegerField(default=1, choices = COMPONENT_TYPE_CHOICES)
component_name              = models.CharField(max_length=200)
branch_number_collectors    = models.IntegerField(default=4)

# Hide if component_type==2 
k_v                         = models.FloatField(default=1)

# Hide if component_type==1
DI                         = models.FloatField(default=0.025)
length                      = models.FloatField(default=1)

# Calculated properties
branch_volumetric_flow_rate = models.FloatField(default=0)
branch_mass_flow_rate       = models.FloatField(default=0)

velocity                    = models.FloatField(default=0)
reynolds                    = models.FloatField(default=0)
friction_coefficient        = models.FloatField(default=0)
pressure_loss               = models.FloatField(default=0)

@classmethod
def create( cls, 
            circuit,
            ...,

forms.py如下:

class ComponentForm(forms.ModelForm):
    class Meta:
        model = Component
        fields = [
            'component_type',
            'component_name',
            'branch_number_collectors',
            'k_v',
            'DI',
            'length'
        ]

简化后的Django模板如下:

{% block content %}
<form method='POST'> {% csrf_token %}
    {{ form.as_p }}
    <button type='submit'>Save</button>
</form>
{% endblock %}

Answer 1

首先进入django shell，然后执行以下操作:

python manage.py shell

from yourapp.yourform import ComponentForm
f = ComponentForm()
print(f.as_p())

这将为您提供您可以在 javascript 或 CSS 中使用的所有 id 和 class 名称进行操作。

假设你想隐藏length 那么你会这样做:

$(document).ready(function(){
    $('#id_length').hide();
})