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

我想 隐藏表单字段。用户应能够选择组件类型，可以是阀门，在这种情况下，用户应指定Kv值，DI和长度字段应隐藏。或者，用户可以选择管道组件类型，在这种情况下，用户应指定管道的内径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,
            ...,

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

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

{% extends 'base.html' %}

<script>
{% block jquery %}

    // Call hideShow when page is loaded
    $(document).ready(function(){
        hideShow()
    })

    // call hideShow when the user clicks on the component_type dropdownlist
    $('#id_component_type').click(function(){
        hideShow()
    });

// The jquery function below hides/shows the k_v, DI and length fields depending on the selected component_type 
function hideShow(){
    if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "1")
    {
        $('#id_length').parents('p:first').hide();
        $('#id_DI').parents('p:first').hide();
        $('#id_k_v').parents('p:first').show();
    }else
    {
        $('#id_length').parents('p:first').show();
        $('#id_DI').parents('p:first').show();
        $('#id_k_v').parents('p:first').hide();
    }
}
{% endblock %}
</script>


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

forms.py如下所示：

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

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

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

{% extends 'base.html' %}

<script>
{% block jquery %}

    // Call hideShow when page is loaded
    $(document).ready(function(){
        hideShow()
    })

    // call hideShow when the user clicks on the component_type dropdownlist
    $('#id_component_type').click(function(){
        hideShow()
    });

// The jquery function below hides/shows the k_v, DI and length fields depending on the selected component_type 
function hideShow(){
    if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "1")
    {
        $('#id_length').parents('p:first').hide();
        $('#id_DI').parents('p:first').hide();
        $('#id_k_v').parents('p:first').show();
    }else
    {
        $('#id_length').parents('p:first').show();
        $('#id_DI').parents('p:first').show();
        $('#id_k_v').parents('p:first').hide();
    }
}
{% endblock %}
</script>


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

简化的Django模板如下所示：

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

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

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

{% extends 'base.html' %}

<script>
{% block jquery %}

    // Call hideShow when page is loaded
    $(document).ready(function(){
        hideShow()
    })

    // call hideShow when the user clicks on the component_type dropdownlist
    $('#id_component_type').click(function(){
        hideShow()
    });

// The jquery function below hides/shows the k_v, DI and length fields depending on the selected component_type 
function hideShow(){
    if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "1")
    {
        $('#id_length').parents('p:first').hide();
        $('#id_DI').parents('p:first').hide();
        $('#id_k_v').parents('p:first').show();
    }else
    {
        $('#id_length').parents('p:first').show();
        $('#id_DI').parents('p:first').show();
        $('#id_k_v').parents('p:first').hide();
    }
}
{% endblock %}
</script>


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

---

首先转到django shell，然后执行以下操作：

python manage.py shell

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

这将为您提供可以在javascript或CSS中操作的所有id和类名

假设要隐藏长度，则将执行以下操作：

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

---

好的，我解决了这个问题。当用户从component_type dropdownlist中选择管道选项时，k_v字段将隐藏，DI和length字段将显示。当用户从component_type下拉列表中选择k_v选项时，将显示k_v字段，并隐藏长度和DI字段

我的Django模板现在如下所示：

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

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

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

{% extends 'base.html' %}

<script>
{% block jquery %}

    // Call hideShow when page is loaded
    $(document).ready(function(){
        hideShow()
    })

    // call hideShow when the user clicks on the component_type dropdownlist
    $('#id_component_type').click(function(){
        hideShow()
    });

// The jquery function below hides/shows the k_v, DI and length fields depending on the selected component_type 
function hideShow(){
    if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "1")
    {
        $('#id_length').parents('p:first').hide();
        $('#id_DI').parents('p:first').hide();
        $('#id_k_v').parents('p:first').show();
    }else
    {
        $('#id_length').parents('p:first').show();
        $('#id_DI').parents('p:first').show();
        $('#id_k_v').parents('p:first').hide();
    }
}
{% endblock %}
</script>


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