关于django模板中表单字段值的动态隐藏/取消隐藏选项卡
Dynamic hide/unhide tab regarding a form field value in django template
我有一个在选项卡中呈现三个表单的模板。
第三种形式是隐藏的,如果选择了第二种形式的字段中的值(通过下拉菜单进行选择),我想动态地加入。
当我在第二个窗体上选择选项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
以显示选项卡!
相关文章:
- 角度 JS - 显示/隐藏动态表的一些行
- 显示和隐藏动态出现的文本的Div
- 显示和隐藏动态 jQuery UI 对话框
- 在动态超链接中隐藏动态电子邮件地址
- 谷歌图表如何隐藏动态创建的系列,并只显示图例中的一个
- 通过复选框选择隐藏动态谷歌地图标记
- 显示和隐藏动态生成的ID's使用javascript
- 隐藏动态创建的Javascript数组
- 使用jQuery和select元素隐藏动态类
- 如何隐藏动态内容,如果它's的宽度大于屏幕宽度
- Django新手-需要帮助隐藏动态构建的表的部分
- css显示隐藏动态id'的问题;
- 动态复选框隐藏动态输入框
- jQuery显示/隐藏动态元素
- 隐藏动态创建的单选按钮组件
- Kineticjs组缓存和图层绘制隐藏动态弧线形状
- 如何隐藏动态创建的具有动态ID的html元素
- 显示/隐藏动态组合框
- jquery.是否可以隐藏动态生成的对象(tr)
- 隐藏动态第n个表行数Jquery