关于django模板中表单字段值的动态隐藏/取消隐藏选项卡

Dynamic hide/unhide tab regarding a form field value in django template

本文关键字:隐藏 动态 取消 选项 django 字段 表单 关于      更新时间:2023-09-26

我有一个在选项卡中呈现三个表单的模板。

第三种形式是隐藏的,如果选择了第二种形式的字段中的值(通过下拉菜单进行选择),我想动态地加入。

当我在第二个窗体上选择选项b-option时,我想取消隐藏第三个选项卡。

有什么想法吗?

input.html(模板)

<form class="form-horizontal" method="post">
    {% csrf_token %}
    <div class="tab-pane">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#1" data-toggle="tab">Demographics</a>
            </li>
            <li>
                <a href="#2" data-toggle="tab">Diagnosis</a>
            </li>
            <li class="hide">
                <a href="#3" data-toggle="tab">A_b_sickle</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="1">
                <div class="container"> {%crispy frm%}</div>
            </div>
            <div class="tab-pane fade" id="2">
                <div class="container">{%crispy frm_d%}</div>
            </div>
            <div class="tab-pane" id="3">
                <div class="container"> {%crispy frm_a_b_s%}</div>
            </div>
        </div>
    </div>
</form>

视图.py

def input(request):
    context = RequestContext(request)

    if request.method == 'POST':
        my_demographics = DemographicForm(request.POST, prefix="demo")
        my_diagnosis = DiagnosisForm(request.POST, prefix='diag')
        my_a_b_sickle= A_b_sickle_thalForm(request.POST,prefix='a_b_s')
        if my_demographics.is_valid() and my_diagnosis.is_valid() and my_a_b_sickle.is_valid:
            my_demographics_object = my_demographics.save()
            my_diagnosis_object = my_diagnosis.save(commit=False)
            my_diagnosis_object.patient = my_demographics_object
            my_diagnosis_object.save()
            my_a_b_sickle_object = my_a_b_sickle.save(commit=False)
            my_a_b_sickle_object.patient = my_demographics_object
            my_a_b_sickle_object.save()
    else:
        my_demographics = DemographicForm(prefix='demo')
        my_diagnosis = DiagnosisForm(prefix='diag')
        my_a_b_sickle= A_b_sickle_thalForm(prefix='a_b_s')
    return render_to_response('input.html', {'frm':my_demographics, 'frm_d': my_diagnosis, 'frm_a_b_s': my_a_b_sickle}, context)

型号.py

class Diagnosis(models.Model):
    patient = models.ForeignKey(Demographic)
    age_of_diagnosis = models.IntegerField(null=True,blank=True)
    diagnosis_option_value = (
        ('a-option', 'a-option'),
        ('b-option', 'b-option'),
    )
    diagnosis_option = models.CharField( max_length=45,choices=diagnosis_option_value, default=diagnosis_option_value[0][0])
    def __str__(self):
        return str(self.patient)

编辑:渲染后的模板代码

<div id="div_id_diag-diagnosis_option" class="form-group"><label for="id_diag-diagnosis_option" class="control-label  requiredField">
    Diagnosis option<span class="asteriskField">*</span></label><div class="controls "><select class="select form-control" id="id_diag-diagnosis_option" name="diag-diagnosis_option"><option value="a-option" selected="selected">a-option</option><option value="b-option">b-option</option>select></div></div>

编辑:我的解决方案

    <script>
        $(document).ready(function() {
            $('#id_diag-diagnosis_option').change(function () {
                var value = $(this).val()
                if (value === 'b-option'){
                    $('#mytab a[href="#3"]').parent().removeClass("hide");
                }
            });
        });
    </script>

您需要在Javascript/jQuery:中执行此操作

// For each check box bind
$("#id_diag-diagnosis_option").change(function(){
    // Get the value of the option
    var value = $(this).val()
    // Check the value
    if (value === "b-option"){
        // Show the tab
        $('#myTab a').tab('show');
    }
})

不要忘记使用正确的myTab a和正确的API调用来更改tab_id以显示选项卡!