javascript - 如何修改此脚本以使其在页面首次加载和更改时工作?
问题描述
我有一个加载依赖下拉选项的脚本。我添加了一个部分,只要没有可用的选项,依赖下拉菜单就会隐藏。主下拉保留提交后最近的提交数据,但是当你提交了一个在辅助下拉没有选项的选项,并且页面重新加载时,主下拉,有没有辅助的选项选项显示,以及辅助下拉菜单,当您单击它时它只是空的,因为检查是否应该隐藏它的逻辑只检查主下拉菜单何时发生变化。如何在最后更改此脚本,以便它在开始时和有更改时加载?
enter_exit_area.html
{% extends "base.html" %}
{% load core_tags staticfiles %}
{% block main %}
<form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee #</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div id="my-hidden-div">
<label>Station</label>
{{ 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">Exit Area</button>
</div>
</div>
</form>
<script>
$("#id_work_area").change(function () {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
var $stationNumberField = $("#{{ form.station_number.id_for_label }}");
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#my-hidden-div").show(); // show it
$stationNumberField.html(data);
// Check the length of the options child elements of the select
if ($stationNumberField.find("option").length === 1) {
$stationNumberField.parent().hide(); // Hide parent of the select node
} else {
// If any option, ensure the select is shown
$stationNumberField.parent().show();
}
}
});
});
</script>
{% endblock main %}
更新:
进行了更改,现在脚本看起来像这样,但是,我收到了阻止它加载的错误,可能是什么原因造成的?
function loadStations() {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
var $stationNumberField = $("#{{ form.station_number.id_for_label }}");
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#my-hidden-div").show(); // show it
$stationNumberField.html(data);
// Check the length of the options child elements of the select
if ($stationNumberField.find("option").length === 1) {
$stationNumberField.parent().hide(); // Hide parent of the select node
} else {
// If any option, ensure the select is shown
$stationNumberField.parent().show();
}
}
});
}
$("#id_work_area").change(loadStations());
$(document).ready(loadStations());
jquery.js:4 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at m.fn.init.val (jquery.js:4)
at loadStations ((index):124)
at (index):145
解决方案
尝试将函数代码放入单独的函数中,所以...
function someFunction() {
var url = $("#...
}
然后添加两个事件监听器......
$("#id_work_area").change(someFunction);
$(document).ready(someFunction);
推荐阅读
- cassandra - 如何在 cassandra 中恢复已删除的数据?
- r - 如何使用 ggplot 添加彩色图例?
- java - Spring WebFlux 添加 WebFIlter 以匹配特定路径
- r - ggplot2 3.1.0 中的自定义 y 轴刻度和辅助 y 轴标签
- ionic2 - 为什么柏树点击不适用于离子(点击)事件
- android - 如何为 android 应用程序截屏以获得 read_insights 权限?
- python - create_tag() 在 boto3 中失败
- typescript - 修复 typescript 从 2.1.XX 到 2.4.XXX 的编译错误
- ios - 模仿 UITextField 占位符颜色的正确方法
- python - Keras - Nan in 摘要直方图 LSTM