python - 我如何从前端检查下拉菜单是否为空而不显示?
问题描述
我看到这可以使用 AJAX 来实现,但我对它不是很熟悉,我不知道如何处理它,因为我的 html 是有限的。
我有一个表单,其中包含 ForeignKey 相关的下拉列表。第一个下拉列表中的某些选项导致第二个没有任何选项,在这种情况下,我希望它不出现,而不必刷新页面。
我的页面有一个关于如何制作这些相关下拉列表的教程的 ajax 请求,但我不知道如何创建一个请求来检查station_number是否为空,可能从 div 中隐藏/取消隐藏,或那种,不知道什么是可能的
enter_exit_area.html
{% block main %}
<form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
{% csrf_token %}
<div>
<div>
{{ form.adp_number.help_text }}
{{ form.adp_number }}
</div>
<div>
{{ form.work_area.help_text }}
{{ form.work_area }}
</div>
<div>
{{ form.station_number.help_text }}
{{ form.station_number }}
</div>
</div>
<div>
<div>
<button type="submit" name="enter_area" value="Enter">Enter Area</button>
<button type="submit" name="leave_area" value="Leave">Leave Area</button>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#id_work_area").change(function () {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#id_station_number").html(data);
}
});
});
</script>
{% endblock main %}
还包括我的 views.py 中的load_stations,以防它以任何方式有帮助。
def load_stations(request):
work_area_id = request.GET.get('work_area')
stations = StationNumber.objects.filter(work_area_id=work_area_id).order_by('name')
return render(request, 'operations/station_number_dropdown_options.html', {'stations': stations})
station_number_dropdown_options.html
<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}
解决方案
如代码所示,您可以按如下方式修改您的 JS:
$("#id_work_area").change(function () {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#id_station_number").html(data);
// Check the length of the options child elements of the select
if ($("#id_station_number option").length == 1) {
$("#id_station_number").parent().hide(); // hide parent of the <select node (as your code, the <div> containing the input and the help_text)
} else {
// If any option, ensure the select is shown
$("#id_station_number").parent().show();
}
}
});
});
如您所见,检查所需选择中选项的长度应该可以解决问题。
当用户更改相关仓库值时,如果存在任何选项,else 语句将再次显示 select。
一些注意事项
您可以避免在您
<option value="">---------</option>
的.forloop.first
station_number_dropdown_options.html
<option
评估
class Media
在您的表单中使用以包含它的相关脚本(如果需要,还有 css),此处的文档 -> https://docs.djangoproject.com/en/2.2/topics/forms/media/)
希望这对你有帮助
推荐阅读
- c# - denyandaddcustomizedpages - 使用现代团队网站的 csom 修改属性
- angularjs - 如何从 Angular js 中的 HTTP 拦截器 $httpProvider 读取 URL 和参数
- php - php codeigniter如何同时运行多个函数
- php - 在复习中更改测验导航按钮的颜色
- java - 对多字段对象进行排序和分组
- java - 两次检查列表中的字符串是否包含来自不同列表的部分字符串,并在处理列表后返回唯一列表
- scala - 如何在Scala中的模块之间传递数据时避免使用asInstanceOf
- orange - 我们如何在橙色的散点图中修改 x 和 y 轴的比例?
- python - Creating alternative y axis labels for a horizontal bar plot with matplotlib
- html - 如何内联 Outlook 电子邮件模板文本(nowrap 在浏览器中有效,但在 Outlook 应用程序中无效)?